我有一个表,其中行元素全部由子组件填充。每个子组件中都有一个复选框。现在我想立即获取所有选中的复选框。我可以使用首选项发出作为两种方式绑定(bind)并更新父级上的数组或对象,但我想知道是否有更好的方法。
这里是模板部分的简短示例:
<table>
<thead>
<tr>
<th> Check </th>
<th> Title </th>
</tr>
</thead>
<list-tbody v-for="element in elements" :element="element"> </list-tbody>
</table>
这是子组件
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td> {{element.title}} </td>
</tr>
</tbody>
最佳答案
正如评论中提到的,您可以通过两种方式处理此问题:
- 使用 Vuex 并改变子组件中的 elements 数组。
- 在每个选择点击事件上向父级发出一个事件,父级将更新元素数组。
您更喜欢第二种,因为您没有使用 Vuex,但这没关系。
一旦您在子组件和父组件之间“链接”了数据,您就可以使用过滤方法来仅显示选定的元素。
请查看下面的演示或我评论中的 fiddle 。
const listTbodyVuex = {
props: ['element'],
template: `
<tbody>
<tr>
<td>
<input type="checkbox" @click="selected">
</td>
<td> {{element.title}} </td>
</tr>
</tbody>
`,
methods: {
...Vuex.mapMutations(['changeSelection']),
selected(evt) {
//console.log('clicked', evt.target.checked, this.changeSelection)
// changeSelection mutation could be also called with-out mapping
// this.$store.commit('changeSelection', ...);
this.changeSelection({
id: this.element.id, selected: evt.target.checked
});
}
}
}
const listTbodyEvents = {
props: ['element'],
template: `
<tbody>
<tr>
<td>
<input type="checkbox" @click="selected">
</td>
<td> {{element.title}} </td>
</tr>
</tbody>
`,
methods: {
selected(evt) {
console.log('clicked', evt.target.checked)
this.$emit('selected', {
element: this.element,
newSelection: evt.target.checked
})
}
}
}
const store = new Vuex.Store({
state: {
elements: [
{
id: 0,
title: 'first',
selected: false
},
{
id: 1,
title: 'second',
selected: false
},
{
id: 2,
title: 'third',
selected: false
}
]
},
mutations: {
changeSelection(state, {id, selected}) {
let element = state.elements
.filter((element) => element.id === id)[0];
element.selected = selected;
//console.log('update element', JSON.parse(JSON.stringify(element)));
Vue.set(state.elements, element.id, element);
}
}
})
new Vue({
el: '#app',
store,
data() {
return {
elements: [
{
id: 0,
title: 'first',
selected: false
},
{
id: 1,
title: 'second',
selected: false
},
{
id: 2,
title: 'third',
selected: false
}
]
}
},
computed: {
...Vuex.mapState({
vuexElements: (state) => state.elements
})
},
components: {
listTbodyEvents,
listTbodyVuex
},
methods: {
updateElement(data) {
let element = this.elements
.filter((element) => element.id === data.element.id)[0];
element.selected = data.newSelection;
// console.log('update', element)
},
filterSelected(data) {
// console.log('filter', data.filter((item) => console.log(item.selected)))
return data.filter((item) => item.selected);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.0/vuex.js"></script>
<div id="app">
<h1>Example with vuex</h1>
<table>
<thead>
<tr>
<th> Check </th>
<th> Title </th>
</tr>
</thead>
<list-tbody-vuex v-for="element in elements" :element="element" :key="element.id"> </list-tbody-vuex>
</table>
<pre>only selected: {{filterSelected(vuexElements)}}</pre>
<pre>{{vuexElements}}</pre>
<hr/>
<h1>Example with events</h1>
<table>
<thead>
<tr>
<th> Check </th>
<th> Title </th>
</tr>
</thead>
<list-tbody-events v-for="element in elements" :element="element" :key="element.id" @selected="updateElement"> </list-tbody-events>
</table>
<pre>only selected: {{filterSelected(elements)}}</pre>
<pre>{{elements}}</pre>
</div>
关于javascript - 如何从 vue 中的所有子复选框组件中收集选定的复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46935863/