Bootstrap Vue-Kontrollkästchen <b-table> <b-form-checkbox>

Question

Ich versuche, die B-Form-Checkbox mit der B-Tabelle zu verwenden. Versuchen Sie, die ausgewählte Modul-ID abzurufen.

<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: []
}

Während ich die ausgewählten Modul-IDs abrufen kann, kann ich sie nicht entfernen, wenn ich das Kontrollkästchen aktiviere. Könnte mir jemand eine Idee geben, wie man nachverfolgen kann, ob ein Kontrollkästchen aktiviert (wahr) oder deaktiviert (falsch) ist? Dank im Voraus.

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)
    },
  },
}

演示