form: \[
{
question1: '',
question2: ''
},
{
question1: '',
question2: ''
}
],// 对象数组，每个对象存储一个人的问题选择结果, // 对象数组，每个对象存储一个问题的选择结果
dataList: \[
{
nameList: \['张A', '张B'],
list2: \[{
id: '1',
titleName: "综合评价",
list: \[
{
name: "A",
},
{
name: "B",
},
{
name: "C",
}, {
name: "d",
}]
},
{
id: '2',
titleName: "履职评价",
list: \[
{
name: "好",
},
{
name: "交换",
},
{
name: "一般",
}, {
name: "差",
}]
}
]
},
],
curred: {
index: '',
name: '',
listIndex: '',
value: '',
listItem: ''
}
<div v-for="(item, index) in dataList" :key="index">
<el-card v-for="(name, nameIndex) in item.nameList" :key="nameIndex">
<div>{{ name }}</div>
<el-form laber-width="110" ref="form" :model="form[index]">
<div v-for="(listItem, listIndex) in item.list2" :key="listIndex">
<el-form-item :label="listItem.titleName">
<el-radio-group v-model="form[nameIndex]['question' + listItem[(listIndex + 1)]]">
<el-radio v-for="(option, optionIndex) in listItem.list" :key="optionIndex" :label="option.name"
@change="handleRadioChange(index, name, listIndex, option.name, listItem)">{{
option.name
}}</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-card>
<div>
<el-button type="primary" @click="submitExam">提交答卷 </el-button>
</div>
</div>
每个单选框绑定`v-model`时，使用了同一个属性名`form['question' + (index + 1)]`，导致多个单选框共享同一个状态。 绑定的el-radio-group这个问题的原因是因为在Vue中，对象和数组是引用类型，如果你在一个对象或数组中创建了一个属性，那么所有引用该对象或数组的地方都会受到影响。因此，在你的代码中，当你将`option1`等属性绑定到每个单选框的`value`属性时，它们实际上是引用了同一个属性，因此当你选择一个单选框时，所有引用该属性的单选框都会被选中。
为每个问题创建了一个属性，例如`question1`、`question2`等。然后将每个单选框的`v-model`绑定到对应的属性上。在选择单选框时，将选中的值存储到对应的属性中，使用`this.$set`方法可以确保表单数据响应式更新。
handleRadioChange(index, name, listIndex, value, listItem) {
this.curred.index = index
this.curred.name = name
this.curred.listIndex = listIndex
this.curred.value = index
this.curred.listItem = listItem
this.$set(this.form[index], 'question' + (listIndex + 1), value);
console.log(`${name} - ${listItem.titleName} - Question ${listIndex + 1} selected option: \${value}\`);
},
submitExam() {
console.log('d', this.curred);
},
nameList就2个选择，然后下面list3个，然后你这个nameList和下面数组index对不上。选择履职评价任意一个，下面的工作质量也选中了
form: [
{
question1: '',
question2: '',
question3: '',
},
{
question1: '',
question2: '',
question3: '',
}
],// 对象数组，每个对象存储一个人的问题选择结果, // 对象数组，每个对象存储一个问题的选择结果
dataList: [
{
nameList: ['张A', '张B'],
list2: [
{
id: '1',
titleName: "综合评价",
list: [
{
name: "A",
},
{
name: "B",
},
{
name: "C",
}, {
name: "d",
}]
},
{
id: '2',
titleName: "履职评价",
list: [
{
name: "好",
},
{
name: "交换",
},
{
name: "一般",
}, {
name: "差",
}]
},
{
id: '3',
titleName: "工作质量",
list: [
{
name: "好",
},
{
name: "交换",
},
{
name: "一般",
}, {
name: "差",
}]
}
]
},
],\
handleRadioChange(index, name, listIndex, optionName, listItem) {
this.curred.index = index
this.curred.name = name
this.curred.listIndex = listIndex
this.curred.value = index
this.curred.listItem = listItem
// this.$set(this.form[index], 'question' + (listIndex + 1), value);
this.answers[index][listIndex] = optionName; // 保存当前选择的选项
console.log('this.answers', this.curred);
// console.log(`${name} - ${listItem.titleName} - Question ${listIndex + 1} selected option: \${value}\`);
},
<div v-for="(item, index) in dataList" :key="index">
<el-card v-for="(name, nameIndex) in item.nameList" :key="nameIndex">
<div>{{ name }}</div>
<el-form laber-width="110" ref="form" :model="form[index]">
<div v-for="(listItem, listIndex) in item.list2" :key="listIndex">
<el-form-item :label="listItem.titleName">
<el-radio-group v-model="form[nameIndex][listIndex]">
<el-radio v-for="(option, optionIndex) in listItem.list" :key="optionIndex" :label="option.name"
@change="handleRadioChange(index, name, listIndex, option.name, listItem)">{{
option.name
}}</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-card>
<div>
<el-button type="primary" @click="submitExam">提交答卷 </el-button>
</div>
</div>
