不知道大家有没有遇到过这个问题，当我们给data里边声明或者已经赋值过的对象或者数组，添加新的属性时，如果更新此属性的值是不会动态更新视图的。
$set
看以下实例：
我们开始给drug_list追加一个新的属性‘edit_select’，默认所有的编辑状态为false，当我们点击的时候，把当前点击的编辑状态置为true
<div id="box">
<div v-for="drug_item in drug_list" @click="choose(drug_item)">
<a :class="{pressed:drug_item.edit_select}"></a>
<span>{{drug_item.drug_common_name}}{{drug_item.edit_select}}</span>
</div>
</div>
<script>
var vm = new Vue({
el:‘#box‘,
data:{
drug_list:[
{drug_common_name: "辛伐他汀片",drug_count: "1"},
{drug_common_name: "喉疾灵片",drug_count: "2"},
{drug_common_name: "乐脉胶囊",drug_count: "3"},
]
},
created:function(){
this.setData();
},
methods: {
setData:function(){
for(var i=0;i<this.drug_list.length;i++){
this.drug_list[i][‘edit_select‘]=false;
}
},
choose:function(item){
item.edit_select=true;
console.log(item)
},
}
})
</script>
我们打印一下点击之后的数据会发现数据已经改了
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性, Vue 无法探测普通的新增属性
怎么办呢？
for(var i=0;i<this.drug_list.length;i++){ //this.drug_list[i][‘edit_select‘]=false; that.$set(this.drug_list[i], ‘edit_check‘, false); }
原文：https://www.cnblogs.com/lst619247/p/10944231.html