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