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(目标值,数组下标值或对象属性名,要修改的实际值)

你可能感兴趣的:(javascript,前端)