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

问题描述

为什么我不能绑定Vue中的对象属性？对象 addr 没有立即反应，但是 test 是被动的，怎么回事？在这种情况下，我该如何绑定它？

HTML

  < div id =app> 
 
< input type =textid =contactNumv-model =addr.contactNumname =contactNum> 
 
< input type =textid =testv-model =testname =test> 
< br /> 
 {{addr}}< br /> 
 {{addr.contactNum}}< br /> 
 {{test}} 
< / div> 
  

Javascript

  var vm = new Vue（{
 el：'#app'，
 data：{
 addr：{}，
 test：
 } 
}）; 
  

Jsfiddle

解决方案

初始化期间，Vue为每个已知属性设置getter和setter。由于 contactNum 最初没有设置，因此Vue不知道该属性，无法正确更新它。这可以通过在 addr 对象中添加 contactNum 来轻松修复。

  var vm = new Vue（{
 el：'#app'，
 data：{
 addr：{
 contactNum ：//<  -  this one 
}，
 test：
} 
}）; 
  

以上称为 reactivity in Vue。由于Vue不支持将属性动态添加到其反应性系统，因此我们可能需要某种解决方法。 API提供了一个可能的解决方案。在动态添加属性的情况下，我们可以使用 Vue.set（vm.someObject，'b'，2）。

<这样做的标记将需要得到一些更新。不要使用 v-model ，最好使用一个事件监听器，比如 @input 。

 < input type =textid =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 。

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屋！