Vue两次循环渲染调查问卷列表,如何保证答案单选且正确添加选中样式,并记录所有用户填写的答案

<div class="select-info-item" v-for="(item,index) in questionnaireList" :key="index">
    <div class="select-info-title">{{item.title}}</div>
    <div class="select-info-data">
        <div v-for="(it,idx) in questionnaireList[index].optionList" :key="idx">
            <div class="radio-icon" :class="{'radio-icon-active':false}"
                 @click="selectRadio(index,idx)"></div>
            <div class="answer-title">{{it.optionTitle}}</div>
        </div>
    </div>
</div>
1.questionnaireList是后端返回的所有调查问卷的问题和选项
2.optionList是答案列表
3.radio-icon是空心圆圈样式,代表没选中,radio-icon-active实心圆圈样式,代表单选选中,页面如下:

 

key改成唯一标识,不要用index

如果item里有唯一标识,就直接用,没有的话可以用'时间戳_index'

v-for渲染时   如果key相同的已存在,会在原有的基础上渲染,会导致单选复选的选中状态异常、input和select的默认值异常