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

这段时间工作上经常操作数组数据，并且要求实时更新视图数据，这个时候首先想到的是 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).