vue watch监听新增属性

最近使用vue的watch功能监听Object的属性变化,发现一个问题:通过直接赋值的方法为Object新增属性时,watch监听不到变化

监听方法

watch: {
     queryForm: {
           handler (value) {
               console.log(value)
           },
           deep: true
     }
 }

新增属性id

methods: {
  fun1 () {
     this.queryForms['id'] = 2
  }
}

这种方法新增了id属性,watch是无法监听到变化的。

解决方法

methods: {
  fun1 () {
     this.$set(this.queryForms, 'id', '2')
  }
}

此方法赋值可以监听到变化。

备注:不仅新增属性,原有属性变化时也可以使用this.$set()方法

猜你喜欢

转载自www.cnblogs.com/wangyingblock/p/12216935.html