vue嵌套循环单选框双向绑定失效！

Question

虚心请教各位学的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>

Answer 1

• 您可以看一下 夏昊老师的VUE入门课程中的 双向数据绑定小节