关于这个问题，官网上说的很清楚官方文档 

写个例子
HTML
<body>
<div class="box">
<div v-for="aa in aas">{{aa}}</div>
<button @click="change">变数据 </button>
</div>
</body>

js
var vm = new Vue({
el:".box",
data:{
aas:["ss","ddd","fff","bbb"]
},
methods:{
      change(){
      // 点击按钮时，改变aas的最后一个元素，
      // 数据变了 但是view没有更新
      this.aas[3] = 444;
    }
  }
})

为什么
因为vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty()方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view；解决方案就是，需要我们主动通知vue；

解决方案1
methods:{
    change(){
    this.aas[3] = 444;
    // 在vm实例上通知
    vm.$set(this.aas,3,444)
  }
}
解决方案2
methods:{
    change(){
    this.aas[3] = 444;
    // 在全局对象上通知
    Vue.set(this.aas,3,444)
  }
}
解决方案3
methods:{
  change(){
    // vue本身可以监听到数组的一些方法,例如:
    // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
    this.aas.splice(3,1,"444");
  }
}

												


											
vue数据绑定数组，改变元素时不更新view问题的更多相关文章
	

    
								
  1. vue中，对象数组多层嵌套时，更新数据更新页面
		
    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
    
		
    2. 
						
  2. vue 数组push元素 视图没更新
		
    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...
    
		
    3. 
						
  3. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
		
    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
    
		
    4. 
						
  4. Vue.set 向响应式对象中添加响应式属性，及设置数组元素触发视图更新
		
    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
    
		
    5. 
						
  5. Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法
		
    由于初始化类型错误导致的不更新,代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta ...
    
		
    6. 
						
  6. Vue 嵌套数组  数组更新视图不更新
		
    关于Vue的响应式原理,可以看官方文档或其他资料, https://www.jianshu.com/p/34de360d6035 data里定义了一个数组arr,数组的元素可以是同样格式的数组arrC ...
    
		
    7. 
						
  7. vue 改变数据DOM不更新，获取不到DOM的解决方法
		
    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
    
		
    8. 
						
  8. vue中数组变动更新检测
		
    Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push() pop() shift() unshift( ...
    
		
    9. 
						
  9. vue操作数组时遇到的坑
		
    用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法:  括号里写需要加入的元素  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 关于laravel5  消息订阅/发布的理解初
			
    laravel5.4感觉官网文档说滴不够详细...安装predis官网很详细,这里略过.... 生成命令 直接使用 Artisan 命令 make:command,该命令会在 app/Console/ ...
    
			
    2. 
						
  2. (6)Microsoft office  Word 2013版本操作入门_文件封面，页首，页尾
			
    1插入封面: 1.1光标移动到首段,按住 Ctrl+Enter键可以插入一个新页面. 1.2 插入--->封面 可以在封面插入一个文件封面,里面的图片可以自己修改,文字标题也可以自己修改. 1. ...
    
			
    3. 
						
  3. (5)Microsoft office  Word 2013版本操作入门_标尺
			
    1.标尺 :左缩进,右缩进,悬挂缩进,首行缩进,阴影部分 可以左右拖拽调整边缘. 1.1  左缩进:默认缩进所在的段落,要缩进多段则需要多段落选中, 后拖动左缩进. 1.2 首行缩进缩进或者突出所选的 ...
    
			
    4. 
						
  4. SpringBoot+WebSocket
			
    SpringBoot+WebSocket 只需三个步骤 导入依赖 <dependency> <groupId>org.springframework.boot</grou ...
    
			
    5. 
						
  5. arcgis建立拓扑分析(检验矢量图)
			
    目的:矢量图画好后,检查是否有伪节点,悬挂节点等,线要素和面要素都可以检查.伪节点,两条线应该相交但是画的没相交:悬挂节点,两条线看似相交了但是没有节点,因此路径不同(类似于高架桥和交叉口,悬挂节点就 ...
    
			
    6. 
						
  6. Android为TV端助力 最简单的自定义圆点view
			
    首先创建一个选择器,用来判断圆点状态,可以根本自己的需求改 <selector xmlns:android="http://schemas.android.com/apk/res/an ...
    
			
    7. 
						
  7. 将html前端代码提取公因数（5）
			
    将html前端代码提取公因数(5) 注意:这是优化html代码,对于多个html代码相同的部分提取到一个模板中,只需要编写变化的html 1,利用Django提供的render方法的第三个参数的属性  ...
    
			
    8. 
						
  8. [Objective-C]用Block实现链式编程
			
    看这篇博客时最快让你上手ReactiveCocoa之基础篇看到作者介绍链式编程那一块,发现自己的钻研精神不足.想想自己使用链式编程也有段时间了,对,就是 Masonry 库.自己一直享受点语法带来的效 ...
    
			
    9. 
						
  9. 【LeetCode】两数相加
			
    题目描述 给出两个非空的链表用来表示两个非负的整数.其中,它们各自的位数是按照逆序的方式存储的,并且它们的每个节点只能存储一位数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和. ...
    
			
    10. 
						
  10. C#“必须先将当前线程设置为单个线程单元(STA)模式方可进行OLE调用”异常解决方案
			
    关于这类问题网上搜索会有很多解决方案,但基本的意思都相差不大,大致问题出于启用线程时调用类似剪贴板Clipboard.SetDataObject出错,我把我的测试代码展现下: 解决方案:只需将thre ...
    
			
    11.