checkbox中v-model绑定值手动设置true后再点击取消需要点击两次

最新推荐文章于 2023-04-25 19:31:37 发布

原创最新推荐文章于 2023-04-25 19:31:37 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #checkbox失效 #change时checkbox失效 #手动改变model #change

vue 专栏收录该内容

10 篇文章

订阅专栏

在Vue项目中，遇到需求需保留至少一项设置规则，当尝试取消最后一项选择时出现无法一次取消的问题。通过在change方法中使用.native修饰符解决，确保至少有一项设置规则被保留。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在项目中遇到一个需求，如下：要留最后一个选项，不能都点掉，

当我手动把最后一个设置为true时，添加一个其他的，再点击之前的最后一个，发现取消不了，要点击两次。

在这里插入图片描述

解决方式：在change方法中添加.native修饰符

html中

 @change.native="changeChoose"

js中

changeChoose(changeItem) {
     let nv = this.setting.contractSubjectConfig;
     if (!(nv.enableFixText||nv.enableFormatDate||nv.enableFormatNum||nv.enableReceiverName||nv.enbaleCategoryName)) {
         this.$message.error('请至少保留一项设置规则');
         this.setting.contractSubjectConfig[changeItem] = true;
     }
 }