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

最新推荐文章于 2024-07-23 20:00:14 发布

包淼淼

最新推荐文章于 2024-07-23 20:00:14 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_32849999/article/details/91568485

版权

vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

参考：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'