前言:

        大家都知道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);

 

Logo

前往低代码交流专区

更多推荐