我在点击Select all names
按钮时尝试选择所有输入字段,但这不起作用?
我做了一个例子:
new Vue({
el: '#app',
data: {
names: [
{ "name": "one" },
{ "name": "two" },
{ "name": "three" }
]
},
created() {
this.names.filter(name => name.checked = false);
},
methods: {
selectAll() {
this.names.filter(name => name.checked = true);
}
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Names</th>
</tr>
<tr v-for="name in names">
<td>
<input type="checkbox" v-model="name.checked">{{name.name}} </td>
</tr>
</table>
<button @click="selectAll()">
Select all names
</a>
</div>
我在这里做错了什么?
答案 0 :(得分:1)
Vue cannot detect property addition or deletion。在数据对象中初始化checked
,以便Vue可以使其成为被动的。
答案 1 :(得分:1)
您需要在checked
数组的每个元素中初始化data.names
,以便Vue知道它存在。以下代码应正确执行预期的行为:
new Vue({
el: '#app',
data: {
names: [
{ "name": "one", checked: false },
{ "name": "two", checked: false },
{ "name": "three", checked: false }
]
},
created() {
this.names.filter(name => name.checked = false);
},
methods: {
selectAll() {
this.names.filter(name => name.checked = true);
}
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Names</th>
</tr>
<tr v-for="name in names">
<td>
<input type="checkbox" v-model="name.checked">{{name.name}} </td>
</tr>
</table>
<button @click="selectAll()">
Select all names
</a>
</div>
答案 2 :(得分:1)
正如罗伊所说,Vue在向现有对象添加新属性方面存在问题,但是您可以像这样解决这个问题:
created () {
this.names = this.names.map(name => Object.assign({}, name, { checked: false }));
}
new Vue({
el: '#app',
data: {
names: [
{ "name": "one" },
{ "name": "two" },
{ "name": "three" }
]
},
created() {
this.names = this.names.map(name => Object.assign({}, name, { checked: false }));
},
methods: {
selectAll() {
this.names.filter(name => name.checked = true);
}
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Names</th>
</tr>
<tr v-for="name in names">
<td>
<input type="checkbox" v-model="name.checked">{{name.name}} </td>
</tr>
</table>
<button @click="selectAll()">
Select all names
</button>
</div>
答案 3 :(得分:1)
我会抛出这个变体,因为从评论 '我通过ajax调用得到名字'
在ajax调用返回后,您可以使用Vue.set()
和vm.$data
的组合动态添加到names数组。
参考:Vue.set(target, key, value)
在对象上设置属性。如果对象是被动的,请确保将该属性创建为被动属性并触发视图更新。这主要用于解决Vue无法检测属性添加的限制。
此文档说target
不能是实例的根数据对象,但Vue.set(vm.$data, 'names',...
确实有效。
但是,如果有一些看不见的后果names
可以向下移动。
console.clear()
const vm = new Vue({
el: '#app',
data: {
data: {
names: []
}
},
mounted() {
// setTimeout to simulate an ajax call
setTimeout(() => {
console.log(vm.$data)
Vue.set(vm.$data.data, 'names', [
{name: 'one', checked: false},
{name: 'two', checked: false}
]);
}, 100);
},
methods: {
selectAll() {
this.data.names.filter(name => name.checked = true);
}
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Names</th>
</tr>
<tr v-for="name in data.names">
<td>
<input type="checkbox" v-model="name.checked">{{name.name}} </td>
</tr>
</table>
<button @click="selectAll()">
Select all names
</button>
</div>