vue.set() (this.$set) 的用法

參考：https://blog.csdn.net/gaoxin666/article/details/83656714

經常操作數組數據，並且要求實時更新視圖數據，這個時候首先想到的是 vue.set() 方法（注：當發現model上的數據發生改變，而頁面上的視圖數據沒有改變，推薦使用該方法。），該方法的使用首先要在頁面引入vue,應該這樣寫：import Vue from 'vue'，這樣才能在組件全局獲取到vue這個實例對象。如果你覺得引入麻煩，推薦使用vue.set的別名this.$set。那麼現在上代碼：

HTML:

    <ul class="province_area_style province_area">
                <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
              </ul>

JS:

    clickProvince(pindex, pitem) {
          pitem.checkOn = !pitem.checkOn
          pitem.checkOff = !pitem.checkOff
          this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
    }

從上代碼可知，點擊事件clickProvince( )，可以改變數組 this.provinceArrs 中指定下標 pindex 的值並實時更新頁面的視圖，這樣就極大的方便了操作數組中的某項值，使用示列：this.$set(arr,  index,  val)。當然，this.$set除了用於操作數組外還可以操作對象，使用示例：this.$set( obj, key, val);Vue.set(this.ruleForm, 'shop', 'SELECTED') 即this.ruleForm.shop='SELECTED'