Javascript 如何从vue中的所有子复选框组件中收集选定的复选框？

我有一个表，其中行元素都由子组件填充。每个子组件中都有一个复选框。现在我想一次选中所有复选框。我可以使用prefs emit作为双向绑定并更新父级上的数组或对象，但我想知道是否有更好的方法

下面是模板部件的一个简短示例：

<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>

{{element.title}

您应该真正坚持发射值，以保持组件的分离。也就是说，如果您真的想一次获取所有数据，可以执行以下操作：

首先，您需要在子组件中使用复选框与

v-model

一起使用的数据属性。在本例中，我们将其称为

checkbox\u value

。完成后，可以在父组件方法中执行以下操作：

var checkbox_values = [];
this.$children.forEach(function(child) {
    //you can check the child type here if you have other non-checkbox children
    checkbox_values.push(child.$data.checkbox_value);
});

当然，我不会鼓励你做这样的事情，但你必须做出判断

---

注：以上仅返回值。您可以改为推送对象键/值对

如评论中所述，您可以通过两种方式处理此问题：

• 使用Vuex并从子组件中修改元素数组
• 向父对象发出每个选择单击事件的事件，父对象将更新元素数组

您更喜欢第二种，因为您不使用Vuex，这没关系

在子组件和父组件之间建立数据“链接”后，可以使用筛选方法仅显示选定的图元

请看下面的演示或我评论中的提琴

const listTbodyVuex={
道具：['element']，
模板：`
{{element.title}
`,
方法：{
…Vuex.MapTranslations（['changeSelection']），
选定（evt）{
//console.log（'clicked'，evt.target.checked，this.changeSelection）
//changeSelection突变也可以在没有外部映射的情况下调用
//这个.$store.commit（'changeSelection'，…）；
这是我的选择({
id:this.element.id，选中：evt.target.checked
});
}
}
}
常数ListBodyEvents={
道具：['element']，
模板：`
{{element.title}
`,
方法：{
选定（evt）{
console.log（'clicked'，evt.target.checked）
此.$emit（'selected'{
元素：this.element，
新闻选择：evt.target.checked
})
}
}
}
const store=新的Vuex.store({
声明：{
要素：[
{
id:0，
标题:"第一",，
所选：false
},
{	
id:1，
标题:"第二",，
所选：false
},
{
id:2，
标题:"第三",，
所选：false
}
]
},
突变：{
changeSelection（状态，{id，selected}）{
let element=state.elements
.filter（（element）=>element.id==id）[0]；
element.selected=selected；
//log（'updateelement'，JSON.parse（JSON.stringify（element））；
Vue.set（state.elements、element.id、element）；
}
}
})
新Vue({
el:“#应用程序”，
百货商店
数据（）{
返回{
要素：[
{
id:0，
标题:"第一",，
所选：false
},
{	
id:1，
标题:"第二",，
所选：false
},
{
id:2，
标题:"第三",，
所选：false
}
]
}
},
计算：{
…Vuex.mapState({
vuexElements：（state）=>state.elements
})
},
组成部分：{
ListBodyEvents，
ListBodyVuex
},
方法：{
更新元素（数据）{
让element=this.elements
.filter（（element）=>element.id==data.element.id）[0]；
element.selected=data.newSelection；
//console.log（'update'，元素）
},
选定过滤器（数据）{
//console.log（'filter'，data.filter（（item）=>console.log（item.selected）））
返回数据.filter（（项目）=>item.selected）；
}
}
})

vuex示例
检查
标题
仅选定：{{filterSelected（VuExeElements）}
{{VuExements}}

以事件为例
检查
标题
仅选定：{filterSelected（elements）}
{{elements}}

通常在Vue中，不需要获取复选框本身，只需要获取绑定到它们的数据的状态。你为什么特别需要复选框？是的，你是对的@Bert。我在每个表（组件）上也有一个子表。这样，每个组件都可以单独保存（折叠或不折叠）数据。换句话说，我要么需要一个额外的值（isCollapsed），要么必须将数据存储到其他地方。这就是为什么我决定改用组件。我不会像下面的答案那样做。将数据保留在父对象中，并在每次选择更改时发出事件以更新父对象，或使用Vuex更新元素数组（推荐）。然后，您可以创建一个过滤器方法，以仅获取选定的元素。像这样的。如果这就是你想要的，我可以添加一个答案并添加更多细节。是的@AWolf我认为你的第二个例子是解决这种情况的最佳方案。如果您也将其添加到此处，我可以将其作为答案。类似场景中的事件方法（与Vuex方法相比）在官方文档中有一些支持：