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

示範