访问父零部件中的复选框列表以对选中的图元执行操作

Question

我正在为一些功能而挣扎。我有一个名为ObjectTable的组件，它基本上用调用RestAPI后传递给它的数据来标准化b表。

在父组件中：

<ObjectTable :source="source" :table_data="connectors_data" :display_fields="display_fields"/>

该表添加了一个创建复选框的v-slot：

<template v-slot:cell(selects) = "row">
<b-form-group>
<b-form-checkbox id="row.item.id" @change="selectItem($event, row.item.id)" ></b-form-checkbox>
</b-form-group>
</template>

我需要找到一种方法来了解在父组件中检查了哪些行ID。由于它是一个项目列表，当每个项目都被选中存储在父组件中时，我如何发出事件？或者，我可以从父方法(当按下父方法中的按钮时调用该方法(专门调用子组件中的某些内容吗？

谢谢你的帮助。

BCBB

Answer 1

好的，所以我按照我想要的方式工作。我将组件绑定到一个名为selectItem:的自定义事件

<ObjectTable :source="source" :table_data="connectors_data" :display_fields="display_fields" @selectItem="selectItem"/>

然后在子组件中，我将@change事件绑定到子组件中的一个方法：

<b-form-checkbox id="row.item.id" @change="selectItem($event, row.item.id)" >

然后在子级中的方法中，我调用emit到父级中的绑定方法，根据事件传递true或false，以确定是否需要将该项添加到父级的列表中或删除该项。

selectItem: function(e,i) {
if (e) {
this.$emit("selectItem", i, true)
} else {
this.$emit("selectItem", i, false)
}
},

在父级中，该方法要么添加到列表中，要么不添加，当单击按钮时，它会处理父级中的select_items。

selectItem(item, add) {
if (add) {
this.select_items.push(item)
} else {
var ind = this.select_items.indexOf(item)
this.select_items.splice(ind, 1)
}
}

BCBB