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"

    }

]