我正在尝试实现一个关联数组并结合访问值中的属性，键基于活动对象的值。
<li v-for="campaign in campaigns">
<input type="text" v-model="configuration[campaign._id].value"> {{ configuration[campaign._id].value }}
</li>
https://jsfiddle.net/4yc3bujt/1/
我是不是错过了什么，感觉真的很糟糕。当尝试在 VueJS 1 中执行此操作时，会发生几乎完全相同的情况，两次都不会抛出任何错误。
发生这种情况是由于反应性注意事项 in vue.js。你刚刚定义了 configuration: {}最初在数据中，所以configuration[key]不反应。为了使这些反应，你必须使用这个.$set:
设置对象的属性。如果对象是响应式的，请确保将该属性创建为响应式属性并触发视图更新。这主要用于解决 Vue 无法检测属性添加的限制。
使用如下：
this.campaigns.forEach((campaign) => {
var id = campaign._id;
this.$set(this.configuration, id, {'value': 'default value'})
})
var app = new Vue({
el: '#app',
data: {
campaigns: [],
configuration: {}
},
mounted: function() {
this.campaigns = [{
_id: 'abcdefg'
}, {
_id: 'kejwkfe'
}, {
_id: 'iruwiwe'
}, {
_id: 'reiwehb'
}];
this.campaigns.forEach((campaign) => {
var id = campaign._id;
this.$set(this.configuration, id, {'value': 'default value'})
})
}
})
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<ul>
<li v-for="campaign in campaigns">
<input type="text" v-model="configuration[campaign._id].value" />
{{ configuration[campaign._id].value }}
</li>
</ul>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
