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"
      }
    ]