Vue.js 绑定对象属性 [英] Vue.js bind object properties

问题描述

为什么我无法在 Vue 中绑定对象属性?对象 addr 不是立即响应的，但是 test 是响应的，怎么会?这种情况下应该怎么绑定?

HTML

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

Javascript

var vm = new Vue({el: '#app',数据: {地址:{}，测试: ""}});

Jsfiddle

解决方案

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

var vm = new Vue({el: '#app',数据: {地址:{contactNum: ""//<-- 这个},测试: ""}});

以上在Vue中称为reactivity.由于 Vue 不支持向其反应性系统动态添加属性，因此我们可能需要某种解决方法.API 提供了一种可能的解决方案.如果是动态添加的属性，我们可以使用 Vue.set(vm.someObject, 'b', 2).

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

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

var vm = new Vue({el: '#app',数据: {地址:{}，测试: ""},方法: {更新:函数(对象，道具，事件){Vue.set(obj, prop, event.target.value);}}});

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

Why I can't bind the object properties in Vue? The object addr is not reactive immediately, but test is reactive, how come? In this case, how should I bind it?

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

解决方案

During initialisation Vue sets up getters and setters for every known property. Since contactNum isn't initially set up, Vue doesn't know about that property and can not update it properly. This can be easly fixed by adding contactNum to your addr object.

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

The above is called reactivity in Vue. Since Vue doesn't support adding properties dynamically to its reactivity system, we may need some kind of workaround. A possible solution is provided by the API. In case of dynamically added properties we can use Vue.set(vm.someObject, 'b', 2).

Doing so the markup would need to get some update. Instead of using v-model it'd be better to use an event listener like @input. In this case our markup could look like this.

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

So basically the function will get triggered every time the input elements value changes. Obviously doing so will also require some adjustments on the JS part.

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

Since Vue triggers Vue.set() on any reactive element, we simply call it on our own because Vue doesn't recognizes a dynamically added property as a reactive one. Of course, this is only one possible solution and there may be lots of other workarounds. A fully working example can be seen here.

这篇关于Vue.js 绑定对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！