Vue.js 深度watch (deep = true) 对象属性,动态属性监控不到 - 问题解决,为版本bug

Vanghohs
  • 183

如下代码, 可以watch到对象的已定义属性, sn, name。 但从input表单动态绑定的description无法监控到。
就是说,页面显示出来的时候,sn, name的变化可以被监控到, 但description的变化监控不到, 因为在 data() 中的 newBean2没有声明这个属性?
(场景是:想把一个数据很多的form复用为一个组件,因此需要将整个form的数据以一个object传回父组件,通过子组件watch,父组件监听的方式)

问题解决:
问题 vue 版本 2.3.3
直接升级到 2.5.3 就解决了。

<template>
  <div class="wrapper">
    <div><b> TEST PAGE</b></div>
    <el-form :model="newBean2" >
      <el-form-item label="SN"  >
        <el-input v-model="newBean2.sn" ></el-input>
      </el-form-item>
      <el-form-item label="产品"  >
        <el-input v-model="newBean2.name" ></el-input>
      </el-form-item>
      <el-form-item label="描述" >
        <el-input v-model="newBean2.description"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newBean2: {
        sn: '',
        name: ''
      }
    }
  },
  watch: {
    newBean2: {
      handler: function (newVal, oldVal) {
        console.info('value changed ', newVal)
        // this.$emit('e1', newVal)
      },
      deep: true
    }
  }
}
</script>

回复
阅读 26.9k
3 个回答

copy了你的代码是可以watch到的,不过贴出来的代码export default少了个大括号。

补充说明:
在页面中'SN'输入框 输入 a,可以监控到变更;
在页面中'产品'输入框 输入 b,可以监控到变更;
在页面中'描述'输入框 输入 c,console没反应;
在页面中'产品'输入框 输入 bb,可以监控到变更, 且能看到新属性 description的值为 'c';
但是,在页面中'描述'输入框 修改 'c' 为 'cc',console没反应, 仍然监控不到description 属性;
页面
clipboard.png

1、你用v-model的方式,是可以正常触发watch的,也就是你上面对“描述”的修改,是可以触发watch的;
2、在javascript里面动态添加的新属性是不会触发watch的。

宣传栏