Bootstrap Vue 复选框 <b-table> <b-form-checkbox>

Question

我正在尝试将 b-form-checkbox 与 b-table 一起使用。尝试检索选定的模块 ID。

<b-table
    id="module-table"
    :items="list.modules"
    :fields="fields"
    :busy="isBusy">

    <template slot="num" slot-scope="row">
    {{ row.index + 1 }}
    </template>

    <template slot="checkbox" slot-scope="row">
        <b-form-group>
            <b-form-checkbox v-if="!isLoading" v-model="row.item.selected" @change="selection(row.item.moduleId)" variant="outline-secondary" class="mr-1">
            </b-form-checkbox>
        </b-form-group>
    </template>
</b-table>

data: {
  fields: [
    { key: 'checkbox', label: '', class: 'd-none d-lg-table-cell' },
    { key: 'num', label: 'Num', class: 'd-none d-lg-table-cell' },
  ],
  selected: []
}

虽然我能够检索选定的模块 ID，但在切换复选框时无法删除它们。如果有人可以提供有关如何跟踪复选框是否被选中（true）或未选中（false）的想法。提前致谢。

methods: {
     selection(item) {
          if (true)
              app.selected.push(item);
          else
              app.selected = app.selected.map(x => x != item);
     }
 },

Answer 1

复选框值已通过 v-model 存储在 list.modules[].selected 中，因此您可以仅使用计算的 prop 来获取所选模块，而不是使用单独的 selected 数组：

1. 从 <b-form-checkbox> 中删除 @change="selection(⋯)":

2. 删除 selection 方法和 selected 数据属性，因为不再需要它们。

export default {
  data() {
    return {
      // selected: []  // remove
    }
  },
  methods: {
    // selection() {⋯}  // remove
  }
}

3. 添加一个计算属性，用于过滤 list.modules[] 中选定的模块：

export default {
  computed: {
    selected() {
      return this.list.modules.filter(module => module.selected)
    },
  },
}

演示