Case à cocher Bootstrap Vue <b-table> <b-form-checkbox>

Question

J'essaie d'utiliser b-form-checkbox avec b-table. Essayez de récupérer l'ID du module sélectionné.

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

Bien que je puisse récupérer les ID de module sélectionnés, je ne peux pas les supprimer lorsque je coche la case. Si quelqu'un pouvait donner une idée sur la façon de savoir si une case est cochée (vrai) ou décochée (faux). Merci d'avance.

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

Answer 1

Valeur de la case à cocher passée v-model 存储在 list.modules[].selected 中，因此您可以仅使用计算的 prop 来获取所选模块，而不是使用单独的 selected Tableau :

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

2. Supprimez selection 方法和 selected les attributs de données car ils ne sont plus nécessaires.

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

3. Ajoutez une propriété calculée pour filtrer les modules sélectionnés dans list.modules[] :

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

Démo