Vue中使用this.$set()如何新增数据,更新视图
使用this.$set()新增数据,更新视图
描述
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
简单的讲就是
在页面渲染完成之后,对data里的某个数组或对象进行新增删除属性操作是监听不到的,视图不会更新
<div id='app'> <el-button @click="setinfo">新增属性</el-button> <div v-for="item in info">{{item}}</div> </div>
data: { info: { id: 1, name: '老王', } }, setinfo() { let that = this that.info.age = 11 console.log(that.info) },
可以看到点击按钮之后,打印出的数据中有age,但是视图没更新
正确的应该是使用this.$set
setinfo() { let that = this that.$set(that.info,'age','11') console.log(that.info) }
this.$set(target, key, value)
target
: 要更改的数据源(可以是一个对象或者数组)key
: 要更改的具体数据(索引)value
: 新增的值
删除属性可以使用this.$delete(target,key)
this.$delete(that.info,"name")
说说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).
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
最新评论