Как использовать bootstrap-vue

Question

Как я могу использовать b-form-checkbox внутри v-for

это мой код

<div v-for="(user, index) in users" :key="index">
<b-form-checkbox name="check-button" switch>
</b-form-checkbox>
</div>

как я могу передать идентификатор пользователя и значение флажка в метод при переключениифлажок.Каждый флажок имеет свой идентификатор пользователя

Любой может помочь мне, заранее спасибо

Answer 1

Посмотрите пример 2 на https://bootstrap -vue.js.org / docs / components / form-checkbox /

Флажки - выбранные значения (в данном случае идентификатор пользователя) будут элементами массива selected, потому что это v-model для группы флажков. Если идентификатор пользователя отсутствует в массиве, он не выбран.

<b-form-group label="Users:">
  <b-form-checkbox-group id="checkbox-group" v-model="selected" name="selectedUsers">
    <b-form-checkbox v-for="(user, index) in users" :value="user.id" switch></b-form-checkbox>
  </b-form-checkbox-group>
</b-form-group>

Ваш компонент JS - существует миллион способов узнать, выбран ли пользователь, ниже приведен пример метода, чтобы увидеть, существует ли конкретный идентификатор пользователя в массиве selected.

data(){
  return {
    selected: []
  }
},
methods: {
  userIsSelected(userid){
    return this.selected.includes(userid)
  }
}

Если вы хотите знать, когда изменяется выбор, вы можете посмотреть массив selected:

data(){
  return {
    selected: []
  }
},
watch: {
  selected: {
    deep: true,
    handler: function(newValue){
      console.log("Selected users changed", newValue)
    }
  }
},
methods: {
  userIsSelected(userid){
    return this.selected.includes(userid)
  }
}

Свойство deep может или не может быть необходимым, но если ваш массив когда-либо содержит объекты или вложенные массивы, это будет важно.