为什么我无法在 Vue 中绑定对象属性?对象 addr
不是立即反应的,但是 test
是反应的,怎么会?在这种情况下,我应该如何绑定它?
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: ""
}
});
原文由 Sam YC 发布,翻译遵循 CC BY-SA 4.0 许可协议
在初始化期间,Vue 为每个已知属性设置 getter 和 setter。由于
contactNum
最初没有设置,Vue 不知道该属性并且无法正确更新它。这可以通过将contactNum
添加到您的addr
对象来轻松解决。以上在 Vue 中称为 反应性。由于 Vue 不支持向其反应系统动态添加属性,我们可能需要某种解决方法。 API 提供了一个可能的 解决方案。如果是动态添加的属性,我们可以使用
Vue.set(vm.someObject, 'b', 2)
。这样做标记需要得到一些更新。与其使用
v-model
不如使用像@input
这样的事件监听器。在这种情况下,我们的标记可能看起来像这样。所以基本上每次输入元素值发生变化时都会触发该函数。显然这样做也需要对 JS 部分进行一些调整。
由于 Vue 会在任何反应性元素上触发
Vue.set()
,我们只需自己调用它,因为 Vue 不会将动态添加的属性识别为反应性属性。当然,这只是一种可能的解决方案,可能还有很多其他解决方法。可以在 这里 看到一个完整的工作示例。