這段時間工作上經常運算元組資料，並且要求實時更新檢視資料，這個時候首先想到的是 vue.set() 方法，這方發的使用首先要在頁面引入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).