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

Question

<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实心圆圈样式，代表单选选中，页面如下：

 

Answer 1

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

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

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