Article From:https://segmentfault.com/q/1010000011703570
Question:

Some of the data in the table is retrieved in the background, some need to be entered in the form, the form bound V-model is array type V-model = inputArr [index], each list of v-models is a different array, then the final submission formHow to submit the data? Is it necessary to splice the data of each row, or is there any better way?

Answer 0:

html trRenderingv-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">Submit < /button>< /p>

js Data obtained from backgroundtabData

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

inputFrame input

submitTabAfter triggertabData

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

Answer 1:

What is the cause of this problem? When dealing with this duplicate form, it’s supposed to use V-for to traverse the rendering, so the binding should be done on a row-by-row basis. At the time of submission, the past is already an array of values for each row.

Answer 2:

V-forRendering, so each line of data is naturally different, so each line of V-model is also different, the key is what you want to design your data to look like, it is recommended to use the form of an object array to get, each line can get its different data, naturally there are different data submitted.

Answer 3:

Form input controls bind directly to backend-fetched arrays, although the object in the backend-fetched array does not have property form property xx, try this. I don’t know if I can do it.

Similar Posts:

Link of this Article: How can Vue submit table data?

Leave a Reply

Your email address will not be published. Required fields are marked *