[Vuejs]-Vuejs form get multiple value in array

by

0👍

✅

Let me know if this helps.

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>

Leave a comment