Kotak semak Bootstrap Vue <b-table> <b-form-checkbox>

Question

Saya cuba menggunakan kotak semak b-form dengan b-table. Cuba dapatkan semula ID modul yang dipilih.

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

Walaupun saya boleh mendapatkan semula ID modul yang dipilih, saya tidak boleh mengalih keluarnya apabila menogol kotak pilihan. Jika sesiapa boleh memberikan idea tentang cara menjejak sama ada kotak semak ditandakan (benar) atau dinyahtandai (salah). Terima kasih terlebih dahulu.

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

Answer 1

Nilai kotak semak diluluskan v-model 存储在 list.modules[].selected 中，因此您可以仅使用计算的 prop 来获取所选模块，而不是使用单独的 selected Tatasusunan:

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

2. Alih keluar selection 方法和 selected atribut data kerana ia tidak lagi diperlukan.

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

3. Tambahkan sifat yang dikira untuk menapis modul terpilih dalam list.modules[]:

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

Demo