Vue2.0解决watch对象属性变化监听不到问题

栏目: ASP.NET · 发布时间: 4年前

内容简介:问题在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来。参考网址解决

问题

在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来。参考网址 https://blog.csdn.net/oLianyo...

解决

为啥会出现这种问题?受ES5的限制,Vue.js不能检测到对象属性的添加或删除。请参照 https://v1-cn.vuejs.org/guide...

解决方法

  1. 通过vue的this.$set(object,key,value)
  2. 通过Object.assign()重新创建一个对象,例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
<template>
  <div>
    <p @click="fun1" style="color: blue">方式一</p>
    <p @click="fun2" style="color: blue">方式二</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      p: {a: 1}
    }
  },
  methods: {
    fun1 () {
      console.log('click 1111')
      // this.p.b = 2 // 通过点方法赋值,发现观察不到p的变化
      this.$set(this.p, 'b', 2) // 第一种解决方式,可以查看日志看到已经监听到了变化
    },
    fun2 () {
      console.log('click 2222')
      this.p = Object.assign({}, this.p, {c: 3})
    }
  },
  watch: {
    p: {
      handler (cval, oval) {
        console.log('--------')
        console.log(cval, oval)
      },
      deep: true
    }
  }
}
</script>

<style>

</style>

在我的项目中我引用了第一种方法。我觉得第一种方法更适合我的项目。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Convergence Culture

Convergence Culture

Henry Jenkins / NYU Press / 2006-08-01 / USD 30.00

"Convergence Culture" maps a new territory: where old and new media intersect, where grassroots and corporate media collide, where the power of the media producer, and the power of the consumer intera......一起来看看 《Convergence Culture》 这本书的介绍吧!

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具