Vue里push方法的视图不更新 2019-04-03 代码 阅读次数：

在js里面写的xxx[‘n’] = []，触发push后，视图没及时更新

that.formData\['sampleList'\] = \[\]  // 无效的响应式属性创建方式  
that.formData.sampleList.push(n)  // push后视图不会更新  

查了一番，是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，得用set去创建新的响应式属性：

that.$set(that.formData, 'sampleList', \[\])  
that.formData.sampleList.push(n)  

分析

var vm = new Vue({  
 data: {  
 a: 1  
 }  
})  
// 'vm.a' 是响应式  

vm.b = 2  
// 'vm.b' 不是响应式  

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例：

var vm = new Vue({  
 data: {  
 userProfile: {  
 name: 'Anika'  
 }  
 }  
})  

可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)  

全局vm.$set的方式

vm.$set(vm.userProfile, 'age', 27)