请问vant组件单选框选中及取消选中使用有问题，如何修改？

  • Z时代
  • 2024-02-09
  • 分类：IT

请问vant组件单选框选中及取消选中使用有问题，如何修改？

如图想要实现单选框最初保持未选中状态，用户点击选中，再次点击取消选中，引入van-radio组件，不知道为什么总是实现不了
下为具体代码：

<view class="agreement" style="font-size: 12px;">
                <van-radio-group v-model="radioOne" @change="changeRad">
                    <van-radio name="1" shape="square" icon-size="12px" @click="radClick('1')">
                        <span class="greyText" style="color:#A3A3A3">我已阅读并同意</span>
                        <span class="redText" style="color:rgb(215,0,15)">《湖南三湘银行隐私政策》</span>
                    </van-radio>
                </van-radio-group>
            </view>
data() {
        return {
          radioOne:'',
          radioChange:false,}}
 methods:{
          changeRad(event){
              this.radioChange=true
          },
          radClick(e){
              if(!this.radioChange){
                  this.radioOne=''
              }
              this.radioChange=false
          },
}

请赐教，不胜感激。

回答：

没用过vant, 但是感觉<van-radio-group v-model="radioOne" @change="changeRad">这里的change事件不就是改变当前v-model的值吗
可以考虑写成 this.radioChange = !this.radioChange; 不需要下面的click事件吧

回答：

methods:{
    radClick(e){
        if(!this.radioChange){
            //选框未被选择的情况
            this.radioChange=true
        }else{
  this.radioOne=''
          this.radioChange=false
        }
    },
}

vant 的单选组件，当你在点击选框的时候，该选框的 v-model 已经自动绑定了你选择的值，可以选中，但无法取消，所以需要一个条件来判断选框是否被选中，判断未选中的时候，只需要将条件更改，判断已经被选中的时候，再去清除绑定的值。
当然你这种情况，用多选框会更简单。

以上是 请问vant组件单选框选中及取消选中使用有问题，如何修改？ 的全部内容， 来源链接： utcz.com/p/936996.html

回到顶部