javascript - Vue.js 绑定(bind)对象属性

Question

为什么我无法在 Vue 中绑定(bind)对象属性？对象 addr 不是立即响应的，但是 test 是响应的，这是怎么回事？这种情况下应该怎么绑定(bind)呢？

HTML

<div id="app">

   <input type="text" id="contactNum" v-model="addr.contactNum" name="contactNum">

   <input type="text" id="test" v-model="test" name="test">
   <br/>
   {{addr}}<br/>
   {{addr.contactNum}}<br/>
   {{test}}
</div>

Javascript

var vm = new Vue({
    el: '#app',
    data: {
      addr: {},
      test: ""
    }
});

Jsfiddle

Answer 1

在初始化期间，Vue 为每个已知属性设置 getter 和 setter。由于 contactNum 最初未设置，Vue 不知道该属性并且无法正确更新它。这可以通过将 contactNum 添加到您的 addr 对象来轻松解决。

var vm = new Vue({
  el: '#app',
  data: {
    addr: {
      contactNum: "" // <-- this one
    },
    test: ""
  }
});

以上称为 reactivity 在 Vue 中。由于 Vue 不支持向其 react 系统动态添加属性，我们可能需要某种解决方法。一个可能的 solution由 API 提供。对于动态添加的属性，我们可以使用 Vue.set(vm.someObject, 'b', 2)。

这样做标记需要得到一些更新。与其使用 v-model，不如使用像 @input 这样的事件监听器。在这种情况下，我们的标记可能如下所示。

<input type="text" id="contactNum" @input="update(addr, 'contactNum', $event)" name="contactNum">

所以基本上每次输入元素值更改时都会触发该函数。显然这样做也需要对JS部分进行一些调整。

var vm = new Vue({
  el: '#app',
  data: {
    addr: {},
    test: ""
  },
  methods: {
    update: function(obj, prop, event) {
      Vue.set(obj, prop, event.target.value);
    }
  }
});

由于 Vue 在任何响应式元素上触发 Vue.set()，我们只需自己调用它，因为 Vue 不会将动态添加的属性识别为响应式属性。当然，这只是一种可能的解决方案，可能还有许多其他解决方法。可以看到一个完整的工作示例 here .