Question

我如何在v-for中使用b-form-checkbox

这是我的代码

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

当我切换复选框时，如何将用户ID和复选框值传递给方法。每个复选框都有不同的用户ID

任何人都可以帮助我，预先感谢

Answer 1

在https://bootstrap-vue.js.org/docs/components/form-checkbox/上查看示例2

复选框-所选值（在这种情况下，用户的ID）将是selected数组的元素，因为它是复选框组的v-model。如果用户ID不在数组中，则不会选中它。

<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数组中是否存在特定的用户ID。

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属性可能是必需的，也可能不是必需的，但是如果您的数组曾经包含对象或嵌套数组，那将很重要。

Answer 2

万一有人还在看，这就是我最后要做的事情。

如果选中此复选框，则循环中的当前用户对象将被添加到选定的[]数组中，并且在未选中时将被删除，因此您可以在changeMethod中进行所需的操作。

<div>
 <b-form-checkbox
    v-for="(user, index) in users"
    :key="index"
    v-model="selected"
    :value="user"
    name="checkbox"
    @change="changeMethod">
 </b-form-checkbox>
</div>

data(){
  return {
    selected: []
    users: [{
      name: 'user 1'
      id: '1'
     },...]
  }
},

methods: {
//handle what happens to your selected value when checkbox status changes
  changeMethod(){
    console.log(this.selected)
  }
}

如何使用bootstrap-vue <b-form-checkbox>

2 个答案: