uni-app checkbox在vue3 nvue模式下点选框无法选中

uni-app checkbox在vue3 nvue模式下点选框无法选中

示例代码：

<checkbox-group @change="onChange">  
    <label class="flex">  
        <checkbox value="cb" checked="true" />  
        <text>选中</text>  
    </label>  
</checkbox-group>

操作步骤：

  • 项目运行到手机

预期结果：

  • 点击label包裹的文字和选框都可以正常选中

实际结果：

  • 文字可以选中，选框不能选中

bug描述：

代码见附件，nvue运行到手机，点击文字选中正常。点击checkbox框无法选中，同时查看onChange，发现打印了2次，第1次是{"value":["cb"]}，第2次是{"value":[]}，

信息 描述
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.4.7
手机系统 Android
手机系统版本号 Android 12
手机厂商 小米
手机机型 至尊10
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

uni-ui-t.zip


更多关于uni-app checkbox在vue3 nvue模式下点选框无法选中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题复现，已记录相关人员排查，已加分感谢反馈！

更多关于uni-app checkbox在vue3 nvue模式下点选框无法选中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，使用 vue3 开发 nvue 页面时，可能会遇到 checkbox 无法选中的问题。这通常是由于 nvue 页面的渲染机制与 vue 页面不同所导致的。以下是一些可能的解决方案和排查步骤：

1. 确认 checkbox 的基本用法

确保 checkbox 的基本用法正确，特别是在 nvue 页面中：

<template>
  <view>
    <checkbox :checked="isChecked" @change="onCheckboxChange" />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isChecked = ref(false);

const onCheckboxChange = (event) => {
  isChecked.value = event.detail.value;
};
</script>

2. 使用 v-model 绑定

在 vue3 中，推荐使用 v-model 来绑定 checkbox 的状态：

<template>
  <view>
    <checkbox v-model:checked="isChecked" />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isChecked = ref(false);
</script>

3. 检查 nvue 页面的样式问题

nvue 页面的样式和 vue 页面有所不同，某些样式可能会导致 checkbox 无法正常显示或点击。可以尝试以下方法：

  • 确保 checkbox 的父容器没有设置 pointer-events: none。
  • 检查是否有其他样式覆盖了 checkbox 的默认样式。

4. 确保 checkbox 组件正确引入

在 nvue 页面中，确保 checkbox 组件是从 uni-app 的正确路径引入的。例如：

<template>
  <view>
    <uni-checkbox :checked="isChecked" @change="onCheckboxChange" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import UniCheckbox from '@dcloudio/uni-ui/lib/uni-checkbox/uni-checkbox.vue';

const isChecked = ref(false);

const onCheckboxChange = (event) => {
  isChecked.value = event.detail.value;
};
</script>

5. 检查事件绑定是否正确

确保 @change 事件绑定正确，并且事件处理函数能够正确更新 checkbox 的状态。

6. 测试 checkbox 的点击区域

有时，checkbox 的点击区域可能较小，导致用户无法准确点击。可以尝试增加 checkbox 的点击区域：

<template>
  <view>
    <checkbox :checked="isChecked" @change="onCheckboxChange" style="padding: 20px;" />
  </view>
</template>
回到顶部