vue设置动态model

需求：根据获取的后台数据，遍历生成单选框列表   v-model的值开始时无法确定的

例子：

<div v-for="(item, index) in selQuestionData" :key="index"  class="text item" align="left">
                <el-card class="box-card">
                    <h3 style="margin-bottom: 10px">{{index + 1}}.{{item.title}}</h3>
                    <template>
                        <el-radio-group  v-model="queModels['answer'+item.id]">
                            <el-radio :label="1">A.{{item.selA}}</el-radio>
                            <el-radio :label="2">B.{{item.selB}}</el-radio>
                            <el-radio :label="3">C.{{item.selC}}</el-radio>
                            <el-radio :label="4">D.{{item.selD}}</el-radio>
                        </el-radio-group>
                    </template>
                </el-card>
            </div>

解决方式：可以通过｛｝对象属性的方式获取值，只需在vue中根据返回的数据，添加属性到model对象中，在通过model[xxx]的方式获得即可，但是 Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。 然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上： Vue.set(vm.obj, 'e', 0)*/

data(){
    return {
        queModels:{},
    }
}


//动态设置model属性
for (var index in this.selQuestionData) {
     var queModel = 'answer'+this.selQuestionData[index].id;
                         
     this.$set(this.queModels,queModel, '');
}

最终通过如下方式即可动态获得model

v-model="queModels['answer'+item.id]"