vant的单选框取消点击

<div class="radio-moudel">
    <van-field v-model="radioRadio[index]" name="radioRadio[index]" :error-message="formData[index][itemDetails.value].success ? '' : formData[index][itemDetails.value].message">
        <template #input>
            <van-radio-group v-model="radioRadio[index]" direction="horizontal"  @change="changeReportRidio($event, index)">
                <van-radio v-for="(itemRadio, indexRadio) in radioRadioData" :key="indexRadio" :name="itemRadio.value" @click="clickReportRidio($event, index)">{{ itemRadio.label }}</van-radio>
            </van-radio-group>
        </template>
    </van-field>
</div>
  // 注意要在数据初始化的时候,判断单选框是否选上,还是没有选上,选上就加true,否则就是false
  this.formData.forEach((res, index) => {
    if (res.dataReport) {
      this.radioRadio.push(String(res.dataReport.value))
      if (res.dataReport.value) {
        this.isReportRidio.push(true)
      } else {
        this.isReportRidio.push(false)
      }
    }
   }
// 单选框
    changeReportRidio (value, index) {
     // 避免首次触发,只有从第一次点击的时候
      if (this.isFirstRepaioChanged) {
        this.isReportRidio[index] = false
        // 发生改变后就改为false
      }
      this.$set(this.formData[index].dataReport, 'value', value)
      // 将这个值存储到数据里面
    },
    clickReportRidio (value, index) {
      this.isFirstRepaioChanged = true
      if (this.isReportRidio[index]) {
        // 如果是true代表是选上的,这时候清空已选的值,index是你点击的第几条数据
        this.$set(this.radioRadio, index, '')
        this.formData[index].dataReport.value = ''
      }
      this.isReportRidio[index] = true
      // 然后再将点击的项改为true
    },
data() {
	return: {
		  isReportRidio: [],
	      isChange: [],
	      radioRadio: [],
	}
}

因为页面是多条数据,所以要用数组控制[true, false, false]

radio绑定数组中对象的属性,v-model 不更新值,解决办法

这里用到 vue 的 set 方法,使用时,直接 this.$set() 即可

$set(目标值,数组下标值或对象属性名,要修改的实际值)
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值