radio传给后台 vue_vue中多个radio遍历提交

1.问题描述

后台返回数据结构

[

{

id:1,

question:'吃饭没？',

options:[

{

id:101,

answer:'吃了'

},

{

id:102,

answer:'没吃'

}

]

},

{

id:2,

question:'多大了？',

options:[

{

id:201,

answer:'100岁'

},

{

id:202,

answer:'200岁'

}

]

}

]

提交时候的数据结构

[

{"questionId":1,"optionId":101},

{"questionId":2,"optionId":201}

]

2.遇到的问题

提交数据要和返回数据结构一致，但是出现了新的字段，options如何实时绑定上去

3.处理思路

后台数据返回后，注入新的的属性optionsCheck用来通过v-mode绑定所选值，提交时候再对整个数据进行遍历，筛选出所需值保存在临时对象中，再push进最终的提交数据中

4.处理过程

属性注入

let list = res.data.list

for (let i = 0; i < list.length; i++) {

list[i].optionsCheck = ''

}

模板部分绑定radio

{{item.question}}

{{subItem.answer}}

// 注意，此处v-model绑定的是上一层for中的optionsCheck

数据提交时候的处理

let publishData = []

for (let i = 0; i < this.list.length; i++) {

let obj = {}

obj.questionId = list[i].id

obj.optionId = list[i].optionsCheck

publishData.push(obj)

}

5.后记

由于用到了qs，提交时候数据变成了

publishData[0].questionId:1,

publishData[0].optionId:101,

publishData[1].questionId:2,

publishData[1].optionId:201

使用

JSON.stringify(publishData)