虚心请教各位学的vue比较好的同学，嵌套循环单选框和多选框，v-model双向绑定失效，怎么解决啊？（ps：简答题的双向绑定没有失效，失效的地方就出现在了单选和多选，根据前台打印的信息，后端返回的结果正常）
<template>
<div style="padding-left: 30px;padding-right: 10px">
<div>
<div style="float: left">
<el-button @click="toIndex()">退出答题el-button>
div>
<h2 style="text-align: center">正在考试...h2>
<div style="float: right">
<el-button type="danger">交卷el-button>
div>
div>
<div>
<div>
<h4>一、单项选择h4>
<div v-for="(dto,index) in titleArr.slice(0,3)">
<h5>{{index+1}}{{"、"}}{{dto.maTitle.titleQuestion}}h5>
<el-radio-group v-model="singleAnswer[index]">
<el-radio
v-for="(choice,key) in dto.choiceList"
:key="key+Date.now()"
:label='choice'
>{{ choice }}el-radio>
el-radio-group>
div>
div>
<div>
<h4>二、多项选择h4>
<div v-for="(dto,index) in titleArr.slice(3,6)">
<h5>{{index+1}}{{"、"}}{{dto.maTitle.titleQuestion}}h5>
<el-checkbox-group v-model="manyAnswer[index]">
<el-checkbox
v-for="(choice,key) in dto.choiceList"
:key="key+Date.now()"
:label="choice">{{ choice }}el-checkbox>
el-checkbox-group>
div>
div>
<div>
<h4>三、简答题h4>
<div v-for="(dto,index) in titleArr.slice(-2)">
<h5>{{index+1}}{{"、"}}{{dto.maTitle.titleQuestion}}h5>
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
:key="index+Date.now()"
v-model="textarea[index]">
el-input>
div>
div>
div>
div>
template>
<script>
import {goAheadExam, startExam, updateAnswer} from "../../../api/online/exam";
export default {
name: "examing",
data(){
return{
titleArr:[],
textarea:[],
//用来存储缓存
singleAnswer:[],
manyAnswer:[[]],
examId:"",
//按钮判断
outExamBoolean:false,
openBoolean:true
}
},
methods:{
/*
* 开始考试，生成试卷
* */
startExam(){
let _this = this
_this.examId = _this.$route.query.examId
console.log("拿到examId了吗？"+_this.examId)
startExam(_this.examId).then(res=>{
_this.titleArr = res
console.log(_this.titleArr)
_this.goAheadExam()
// _this.$forceUpdate()
})
},
/*
* 继续答题
* */
goAheadExam(){
let _this = this
// _this.openBoolean = false
goAheadExam(_this.examId).then(res=>{
//根据返回结果进行具体操作
if (res===null){
console.log("我啥也不做")
}else {
console.log("缓存中的结果为：")
console.log(res)
// _this.singleAnswer = res.singleAnswer
// _this.manyAnswer = res.manyAnswer
// _this.textarea = res.textarea
_this.singleAnswer.push(...res.singleAnswer)
_this.manyAnswer.push(...res.manyAnswer)
_this.textarea.push(...res.textarea)
_this.$forceUpdate()
console.log(_this.singleAnswer)
console.log(_this.manyAnswer)
console.log(_this.textarea)
// _this.startExam()
// let arr1 = []
// let arr2 = [[]]
// let arr3 = []
//
// arr1 = res.singleAnswer
// arr2 = res.manyAnswer
// arr3 = res.textarea
//
// _this.singleAnswer = arr1
// _this.manyAnswer = arr2
// _this.textarea = arr3
}
})
},
/*
* 初始化二维数组，否则前端会报错
* */
initManyAnswer(){
for (let index=0;index<3;index++){
this.manyAnswer[index] = new Array();
}
},
/*
* 中断答题（保存答案，更新缓存）
* */
toIndex(){
this.$router.push({
path:"/online/exam",
query:{
outExamBoolean:this.outExamBoolean,
examId:this.examId
}
})
//更新数据库
//封装对象
let titleIdArr = []
for (let i=0;i<this.titleArr.length;i++){
titleIdArr[i] = this.titleArr[i].maTitle.titleId
}
let obj = {
"singleAnswer":this.singleAnswer,
"manyAnswer":this.manyAnswer,
"textarea":this.textarea,
"titleId":titleIdArr,
"examId":this.examId
}
console.log("封装的obj对象为：");
console.log(obj);
updateAnswer(obj).then(function (res) {
console.log(res);
})
},
},
/*
* 接收上个路由传递的参数值（科目id）
* */
mounted() {
},
created() {
this.initManyAnswer()
this.startExam()
},
}
script>
<style scoped>
style>
参考GPT和自己的思路：
根据你提供的代码，我发现可能是因为在循环中使用了相同的 v-model，导致绑定失效。具体地，在单选框和多选框的循环中，你都使用了相同的 v-model，因此只有最后一个组件能够与数据绑定成功。为了解决这个问题，你可以将 v-model 改为 :value 和 @change，然后通过方法来更新数据。具体来说，你可以将单选框和多选框的代码修改为下面这样：
<h5>{{index+1}}{{"、"}}{{dto.maTitle.titleQuestion}}</h5>
<el-radio-group
:value="singleAnswer[index]"
@change="handleSingleAnswerChange(index, $event)">
<el-radio
v-for="(choice,key) in dto.choiceList"
:key="key+Date.now()"
:label='choice'
>{{ choice }}</el-radio>
</el-radio-group>
<h5>{{index+1}}{{"、"}}{{dto.maTitle.titleQuestion}}</h5>
<el-checkbox-group
:value="manyAnswer[index]"
@change="handleManyAnswerChange(index, $event)">
<el-checkbox
v-for="(choice,key) in dto.choiceList"
:key="key+Date.now()"
:label="choice">{{ choice }}
</el-checkbox>
</el-checkbox-group>
然后，你需要在 methods 中添加两个方法来实现数据更新，具体代码如下：
methods: {
handleSingleAnswerChange(index, value) {
this.$set(this.singleAnswer, index, value)
},
handleManyAnswerChange(index, value) {
this.$set(this.manyAnswer, index, value)
}
}
这样就可以解决你的问题了，希望这个答案能够帮到你。