完美解决微信小程序使用复选框van-checkbox无法选中

由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题

html 复制代码
<van-checkbox value="{{ checked }}" shape="square">
          <view class="check-content">
            <view class="checktext">我已阅读并同意>《用户协议》《隐私政策》</view>
          </view>
</van-checkbox>

记得定义checked 默认值

解决办法 :添加onChange事件,给checked 做赋值操作。

html 复制代码
<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
          <view class="check-content">
            <view class="checktext">我已阅读并同意《用户协议》《隐私政策》</view>
          </view>
</van-checkbox>
javascript 复制代码
onChange(e){
    this.setData({
      checked: e.detail
    })
},

可以打印看看console.log(e)

  • 选中效果:
  • 取消选中效果:
相关推荐
满分观察网友z11 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠12 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z14 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog15 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构19 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙26 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1127 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆31 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er36 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0639 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html