访问父组件中的复选框列表以对选中的元素执行操作

Question

我正在努力使用某些功能。我有一个名为 ObjectTable 的组件，它基本上标准化了一个 b-table，在调用 RestAPI 后传递给它的数据。

在父组件中：

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

table 添加了一个创建复选框的 v 槽：

  <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

访问父组件中的复选框列表以对选中的元素执行操作

Accessing a list of checkboxes in a parent component to take action on checked elements

vue.js

bootstrap-vue