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