iview ui vue2.0 radio 点击选中状态后取消选中状态

最新推荐文章于 2025-05-12 13:52:06 发布

周zerlinda

最新推荐文章于 2025-05-12 13:52:06 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： iview 文章标签： view design 前端 vue.js

本文链接：https://blog.youkuaiyun.com/zerlinda0913/article/details/131438058

iview 专栏收录该内容

4 篇文章

订阅专栏

文章描述了一个Vue组件中RadioGroup的使用情况，其中涉及v-model绑定的deficiencyType属性和modalType的逻辑判断。点击Radio标签时，会调用cancelSelection方法改变deficiencyType的值，但在特定条件下，该方法未能成功更新其值。问题在于尽管尝试设置为空字符串，但最终输出仍显示为之前的选择值1。

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

 <RadioGroup v-model="formData.deficiencyType">
              
                <Radio label="1"  :disabled="modalType=='C'?true:false" @click.native="cancelSelection(1)">1</Radio>
                <Radio label="2"  :disabled="modalType=='C'?true:false" @click.native="cancelSelection(2)">2</Radio>
              </RadioGroup>

method:

cancelSelection(selectedLabel) {
          if(this.modalType === 'U'){
            if (this.formData.deficiencyType == selectedLabel) {
             this.formData.deficiencyType = '';
               console.log(" this.formData.deficiencyType1: " +  this.formData.deficiencyType);
            }else{
               this.formData.deficiencyType=selectedLabel
            }
            }
            console.log(" this.formData.deficiencyType: " +  this.formData.deficiencyType);
      },

点击红框中的区域可以取消选中状态