Vuejs表单在数组中获取多个值

Question

我有一个基于数据库数据显示多个输入的表单，我需要在提交表单时获取每个输入 value 以及它们的 id。

我发送时这个表单的最终结果应该是这样的：

array:2 [
    0 => [
        id => 1,
        value => "123
    ],
    1 => [
        id => 5,
        value => "test"
    ]
]

目前我得到的是这个（只有值）：

array:2 [
  0 => "123"
  1 => "test"
]

代码

<form ref="form" :model="form" enctype="multipart/form-data">
    <div class="row">
        <div
        class="col-md-6"
        v-for="(field, index) in fields"
        :key="index"
        >
        <input
            class="form-control"
            v-model="form.field[index]"
            :placeholder="field.title"
        />
        </div>
    </div>
    <vs-button
        class="mt-3"
        @click="onSubmit"
        native-type="submit"
        gradient
    >
        Generate
    </vs-button>
</form>


data() {
    return {
      fields: [],
      form: {
        field: [],
      },
    };
},
methods: {
     onSubmit(e) {
      e.preventDefault();
      axios
        .post("/api/admin/documents/add/", this.form, {...} // sending "this.form"
}

有什么想法吗？

Answer 1

如果这有帮助，请告诉我。

var app = new Vue({
      el: '#app',
     data() {
    return {
      message: "Vue 2",
      fields: ["First Name", "Last Name"],
      myForm: []
    };
  },
  mounted() {
    this.myForm = this.fields.map((field, index) => ({
      id: index+1,
      title: field,
      value: ""
    }));
  },
  methods: {
    save(){
      console.log(this.myForm)
    }
  }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <h1>{{ message }}</h1>
    <div>
      <div v-for="(form, index) of myForm">
        <label>{{ form.title }}</label>
        <input :placeholder="form.title" v-model="form.value" name="index" />
      </div>
      <button type="submit" @click.stop.prevent="save">Submit</button>
    </div>
    <p>{{myForm}}</p>
</div>