我正在使用 vue.js 2.5.2
我有一个对象数组，我想观察 forms[*].selected ，如果它发生变化，则调用一个函数。
这是我的尝试，但显然这是不正确的。我尝试将数组放入 for 循环中以观察所选的每个对象的属性。
watch: {
for (var i = 0; i < forms.length; i++)
{
forms[i].selected: function(){
console.log("change made to selection");
}
}
},
这是称为 forms[] 的对象数组
forms: [
{
day: '12',
month: '9',
year: '2035',
colors: 'lightblue',//default colour in case none is chosen
selected: true
},
{
day: '28',
month: '01',
year: '2017',
colors: 'lightgreen',//default colour in case none is chosen
selected: true
}
],
任何帮助将不胜感激，
Thanks
你可以使用深度观察者 https://v2.vuejs.org/v2/guide/computed.html#Watchers，但更优雅的解决方案是创建您想要观看的数据的计算属性，然后观看它：
new Vue({
el: '#app',
data: () => ({
forms: [{
day: '12',
month: '9',
year: '2035',
colors: 'lightblue',
selected: true
},
{
day: '28',
month: '01',
year: '2017',
colors: 'lightgreen',
selected: true
}
],
}),
computed: {
selected() {
return this.forms.map(form => form.selected)
}
},
watch: {
selected(newValue) {
console.log("change made to selection")
}
}
})
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(form, i) in forms" :key="i">
<input type="checkbox" v-model="form.selected"> {{form.colors}}
</li>
</ul>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
