vue如何提交表格数据？

Question

表格里有的数据是后台获取的，有的是需要在表单里输入的，表单绑定的v-model又是数组类型的v-model=inputArr[index]，每一列表单的v-model又是不同的数组,那么最终要提交表格的数据，要怎么提交?是要拼接每一行的数据吗，还是有什么更好的办法？

Answer 1

html tr渲染用v-for

<table class="table">
  <thead>
  <tr>
    <th>box</th>
    <th>new</th>
    <th>rank</th>
    <th>desc</th>
    <th>title</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(v,i) in tabData">
    <td>{{v.box}}</td>
    <td>{{v.new}}</td>
    <td>{{v.rank}}</td>
    <td><input type="text" v-model="tabData[i]['desc']"></td>
    <td>{{v.title}}</td>
  </tr>
  </tbody>
</table>
<p>
  <button @click="submitTab" type="primary">提交</button>
</p>

js 从后台获取的数据 tabData

tabData: [
      {
        "box": 21650000,
        "new": true,
        "rank": 1,
        "title": "Geostorm"
      },
      {
        "box": 13300000,
        "new": true,
        "rank": 2,
        "title": "Happy Death Day"
      }
    ]

input框输入后

submitTab触发后得到的tabData

[
    {
        "box": 21650000,
        "new": true,
        "rank": 1,
        "title": "Geostorm",
        "desc": "123"
    },
    {
        "box": 13300000,
        "new": true,
        "rank": 2,
        "title": "Happy Death Day",
        "desc": "666"
    }
]

Answer 2

这个问题引起来的原因是什么？在处理这种重复性的表单应该是使用v-for来遍历渲染吧，那么绑定的时候就应该按照一行一行数据来绑定啊！提交的时候过去的就已经是每行的值组成数组。

Answer 3

V-for渲染，所以每行数据自然不同，因此每行的v-model同样也是不同的，关键你想把你的数据设计成什么样子，建议使用对象数组的形式来获取，每一行都能拿到它不同的数据，自然就有不同的数据提交了。

Answer 4

表单输入控件直接绑定后台获取的数组，尽管后台获取的数组中的对象不存在属性表单属性xx，但你试试这样。我也不知道是否能行。