uni-app 内置组件 checkbox 切换选项时 checkbox-group 不触发 change 事件

uni-app 内置组件 checkbox 切换选项时 checkbox-group 不触发 change 事件

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

操作步骤：

  • 拷贝官方例子代码

预期结果：

  • 触发change事件

实际结果：

  • 不触发事件

bug描述：

  • 使用内置组件checkbox 切换选项checkbox-group不触发change事件，把官方例子拷贝过来也不触发

更多关于uni-app 内置组件 checkbox 切换选项时 checkbox-group 不触发 change 事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不好意思自己代码的问题，此贴作废

更多关于uni-app 内置组件 checkbox 切换选项时 checkbox-group 不触发 change 事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我这边测试是可以的，检测下代码逻辑，如确认框架问题，请提供下测试工程

在 uni-app 中使用 checkbox-group 和 checkbox 组件时，如果发现 checkbox-group 的 [@change](/user/change) 事件没有触发，可能是以下几个原因导致的：

1. 事件绑定问题

确保你已经正确地将 [@change](/user/change) 事件绑定到 checkbox-group 组件上。示例代码如下：

<template>
  <view>
    <checkbox-group [@change](/user/change)="handleChange">
      <label>
        <checkbox value="option1" /> 选项1
      </label>
      <label>
        <checkbox value="option2" /> 选项2
      </label>
      <label>
        <checkbox value="option3" /> 选项3
      </label>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      console.log('选中的值:', event.detail.value);
    }
  }
}
</script>

2. checkbox 的 value 属性

确保每个 checkbox 组件都有一个唯一的 value 属性。checkbox-group 的 [@change](/user/change) 事件会返回选中的 checkbox 的 value 值。

3. checkbox-group 包裹问题

确保所有的 checkbox 组件都被正确包裹在 checkbox-group 组件内。如果 checkbox 没有被包裹在 checkbox-group 内，[@change](/user/change) 事件将不会触发。

4. checkbox 的 checked 属性

如果你手动设置了 checkbox 的 checked 属性，可能会导致 [@change](/user/change) 事件不触发。确保 checked 属性的使用符合预期。

5. 事件冒泡问题

如果你在 checkbox 上绑定了其他事件（如 @click），可能会影响 [@change](/user/change) 事件的触发。确保事件处理逻辑没有冲突。

6. uni-app 版本问题

如果以上方法都无法解决问题，可能是 uni-app 版本的问题。尝试更新 uni-app 到最新版本，或者查看官方文档和社区是否有相关问题的解决方案。

7. 调试

你可以通过在 checkbox 上添加 [@change](/user/change) 事件来调试，看看是否能够触发：

<checkbox value="option1" [@change](/user/change)="handleCheckboxChange" /> 选项1
回到顶部