Vue数组或对象修改或新增值后更新视图的问题(set方法)
前言:大家都知道vue是双向绑定响应式更新视图的,这个自动更新视图主要是针对在data里面存在的属性或者对象的键,比如有个data:{ test : 'test'};这里修改 test的值就可以自动更新相关的视图,但是如果你后来添加一个进去然后修改 是没法自动更新的,这就涉及vue的双向绑定原理啦,vue 默认的是给data 属性 添加到侦察器(发布者——订阅者模式)上观察,...
·
前言:
大家都知道vue是双向绑定响应式更新视图的,这个自动更新视图主要是针对在data里面存在的属性或者对象的键,比如有个data:{ test : 'test'};这里修改 test的值就可以自动更新相关的视图,但是如果你后来添加一个进去然后修改 是没法自动更新的,这就涉及vue的双向绑定原理啦,vue 默认的是给data 属性 添加到侦察器(发布者——订阅者模式)上观察,如果有变化就响应视图更新,后面新增的属性和对象是没有做这个添加到观察器的这步操作的,需要手动添加,就需要用到他的set方法来。
数组:
1.数组的splice方法
this.data.splice(index, 1, {
isSelf:true,
name:'test',
text:'test',
time:'9:14:21'
})
2.set方法
可以通过
Vue.set(this.data, index, this.data[index]);
或者
this.$set(this.data, index, this.data[index]);
对象
set方法
Vue.set(this.data,'sex', '男')
或
比如data有个info属性
data () {
return {
info: {
content: 'test'
}
}
},
var key = 'content'; //键 这里的键是info.content 可以依次推出怎么修改其他属性的值(方法同下)
this.$set('info.'+key, value);
或
this.$set('info.content', value);
更多推荐
已为社区贡献2条内容
所有评论(0)