uni-app checkbox-group 中的多个checkbox组件选择和反选错误

操作步骤：

在checkbox-group放入多个checkbox组件, 先勾选上前5个checkbox组件, 然后取消第一个checkbox组件, 然后在重新勾选第一个checkbox组件, 系统会勾选上第一个, 然后取消第5个checkbox的勾选, 而且在checkbox-group的change回调中的数据也是不对的

预期结果：

checkbox 勾选取消能够正常, 并且change监听回调中的数据能够正确

实际结果：

checkbox 勾选取消不正确

bug描述：

附件:

checkbox.zip

更多关于uni-app checkbox-group 中的多个checkbox组件选择和反选错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼

同问

更多关于uni-app checkbox-group 中的多个checkbox组件选择和反选错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼

这个问题通常是由于 checkbox-group 的 value 数组绑定和 checkbox 的 value 属性配置不当导致的。请检查以下几点：

确保 checkbox-group 的 value 是数组类型：在 data 中初始化 checkboxValue: []，并绑定到 checkbox-group 的 value 属性上。
每个 checkbox 的 value 必须唯一：如果多个 checkbox 的 value 值相同，操作时会出现混乱。建议使用具有唯一性的值，如 id 或索引。
使用 @change 事件更新数组：在 checkbox-group 的 change 事件中，直接使用事件返回的 detail.value 更新绑定的数组，避免手动修改数组。

示例代码：

<checkbox-group @change="checkboxChange" :value="checkboxValue">
  <checkbox v-for="item in list" :key="item.id" :value="item.id">{{item.name}}</checkbox>
</checkbox-group>

export default {
  data() {
    return {
      checkboxValue: [],
      list: [
        {id: 1, name: '选项1'},
        {id: 2, name: '选项2'},
        // ...
      ]
    }
  },
  methods: {
    checkboxChange(e) {
      this.checkboxValue = e.detail.value
    }
  }
}