VUE如何提交Table数据（解决相同属性多条数据不能双向绑定的问题）

类似这样的：

解决方案：用数组形式提交

使用v-for来遍历渲染，提交过去的就已经是每行的值组成数组

1.前端代码

<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>

前端vue.js

//虚拟数据，也可以从后台传过来绑定给tabData
tabData: [
      {
        "box": 21650000,
        "new": true,
        "rank": 1,
        "title": "Geostorm"
      },
      {
        "box": 13300000,
        "new": true,
        "rank": 2,
        "title": "Happy Death Day"
      }
    ]