如何在对象中使用Vue watch

时间:2019-02-28 11:49:28

标签: javascript vue.js

我对Status还是陌生的,试图弄清楚为什么当作为对象访问它时手表没有被触发。我看到了this线程,但是我的问题是否相同对我尚不清楚。以下是我的简化示例(完整示例具有更多属性和数组属性

watch

JS

<div id="app">
  <input type="text" v-model.lazy="userInfo.name"> {{userInfo.name}}
</div>

链接到JSFiddle

2 个答案:

答案 0 :(得分:1)

以下是您的案例中的一个简短示例:

new Vue({
  el: "#app",
  data: {
  userInfo: {
       name: 'null'
    }
  },
  computed: {
    name() {
      return this.userInfo.name;
    }
  },
  methods: {

  },
  watch: {
    name(newVal, oldVal) {
      alert(newVal);
      alert(oldVal);
    }
  },
})

答案 1 :(得分:1)

将观察者更改为以下内容:

new Vue({
  el: "#app",
  data: {
    userInfo: {
      name: "null"
    }
  },
  methods: {},
  watch: {
    "userInfo.name": function(oldVal, newVal) {
      console.log(oldVal + " " + newVal);
    }
  }
});

有关同一here的信息,请参阅文档。 检查最后一个示例。