uniapp 中 checkbox 中的 checked 不生效的方案

蚊子前端博客
发布于 2023-09-19 23:14
uniapp 中 checkbox 中,监听 change 事件然后设置 checked 不生效。

我在使用 uniapp 开发小程序的过程中,遇到了小小的问题。当我勾选 checkbox 后,我会去进行一些校验,若校验没有通过,需要再取消这次的勾选。如下:

COPYHTML

<template> <checkbox-group @change="checkboxChange"> <label> <checkbox value="cb" :checked="checked" /> 选中 </label> </checkbox-group> </template> <script> export default { data() { return { checked: false, }; }, methods: { checkboxChange(event) { if (Array.isArray(event.detail.value) && event.detail.value.length) { // 选中的操作 checkOpenId().then((isValid) => { if (!isValid) { // 不生效 this.checked = false; } }); } else { this.checked = false; } }, }, }; </script>

但我不管怎么设置他的checked属性都不管用。

复选框组件(checkbox 组件) 的问题,因为复选框组件没有 @change 事件,checkbox-group 组件拥有 @change 事件,事件返回的结果是当前复选框组中已经勾选的值,但并未同步修改 checked 属性。该组件是直接切换的组件状态,然后触发的 change 事件,并没有同步更新 checked 属性所绑定的值。所以开关组件默认 checked 属性为 true 的时候,点击组件本身会将组件的状态切换为关,但是 checked 属性的并没有改变。

解决方案就是在 @change 的事件中,首先将 checked 设置为 true,然后再想设置成 false 的时候,就可以生效了。

COPYHTML

<script> export default { data() { return { checked: false, }; }, methods: { checkboxChange(event) { if (Array.isArray(event.detail.value) && event.detail.value.length) { // 选中的操作 this.checked = true; // 先将其设置true checkOpenId().then((isValid) => { if (!isValid) { this.checked = false; } }); } else { this.checked = false; } }, }, }; </script>
标签:
阅读(416)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆