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

<div v-for="(item, index) in list" :key="index">
  <div>{{item.question}}</div>
  <div v-for="(subItem, subIndex) in item.options" :key="subIndex">
    <label>
      <input type="radio" :name="item.id" v-model="item.optionsCheck" :value="subItem.id">{{subItem.answer}}  
    </label>
  </div>
</div>
// 注意，此处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)

铁血汉子 2019年1月5日

0 4843