关于vue给对象新增属性页面不会动态更新

不知道大家有没有遇到过这个问题，当我们给data里边声明或者已经赋值过的对象或者数组，添加新的属性时，如果更新此属性的值是不会动态更新视图的。
$set

看以下实例：
我们开始给drug_list追加一个新的属性‘edit_select’，默认所有的编辑状态为false，当我们点击的时候，把当前点击的编辑状态置为true

作者：_conquer_
链接：https://www.jianshu.com/p/c457cfe7d713
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

 <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>

我们打印一下点击之后的数据会发现数据已经改了

 

QQ截图20181115175134.png

但是我们看一下页面效果，会发现并没有添加上class,把数据在页面上打印一下会发现，页面上面的‘edit_select’并没有动态更改

 

QQ截图20181115175352.png

这是为什么呢？
仔细阅读官方文档，我们会发现：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性, Vue 无法探测普通的新增属性

怎么办呢？

Vue.set( target, key, value )

• 参数：
  {Object | Array} target
  {string | number} key
  {any} value
• 返回值：设置的值。
  我们只需要把下面的改一下就可以了

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);
}