v-for循环创建element多选框的bug要如何解决？

Question

我使用element创建了一个多选框，数据由后端循环输出而成，效果如下，但是点击其中一个选项出现了全选的效果

代码如下

  <el-form-item label=" 请勾选此用户所属角色：" prop="types">
      <el-checkbox v-model="ruleForm.types" v-for="item in adminData" :key="item.adminData"> 
           {{item.roleDisplayName}}
      </el-checkbox>
  </el-form-item>

想知道如何解决，感谢您的解答

Answer 1

循环渲染出来v-model应该是item的一个属性吧, 怎么是同一个值

Answer 2

你这样写肯定不对啊，如果要用多选框组，应该这样写

<el-checkbox-group v-model="checkedList">
    <el-checkbox v-for="item in adminData" :key="item.adminData" :label="city">
       {{item.roleDisplayName}}
   </el-checkbox>
  </el-checkbox-group>

你看看官方文档有写的 element checkbox 传送门

Answer 3

1.key值一定要 唯一且只能用 string number
2.建议使用 el-checkbox-group 而不是 el-checkbox

  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>

Answer 4

你v-model同一个值可不有问题么

Answer 5

泻药~
楼主，你的用法不对的。建议去官方文档详细看下。我试着改了下，你试试看。

  <el-form-item label=" 请勾选此用户所属角色：" prop="types">
    <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in adminData" :label="item.roleId" :key="item.roleId"> 
               {{item.roleDisplayName}}
          </el-checkbox>
      </el-checkbox-group>
  </el-form-item>

---

如有帮助，麻烦点击下采纳，谢谢~