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

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

内容简介:问题在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用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>

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


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

查看所有标签

猜你喜欢:

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

科学的极致:漫谈人工智能

科学的极致:漫谈人工智能

集智俱乐部 / 人民邮电出版社 / 2015-7 / 49.00元

集智俱乐部是一个从事学术研究、享受科学乐趣的探索者组成的团体,倡导以平等开放的态度、科学实证的精神进行跨学科的研究与交流,力图搭建一个中国的“没有围墙的研究所”。这些令人崇敬的、充满激情与梦想的集智俱乐部成员将带你了解图灵机模型、冯•诺依曼计算机体系结构、怪圈与哥德尔定理、通用人工智能、深度学习、人类计算与自然语言处理,与你一起展开一场令人热血沸腾的科学之旅。一起来看看 《科学的极致:漫谈人工智能》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

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

HEX CMYK 互转工具