[Vuejs]-Vue: Collect all (or some) form values simultaneously

by

1👍

Usually in Vue form controls are binded to data via v-model. Let’s say my Vue instance/component is like:

new Vue({
  data: {
    user: {
      name: '',
      surname: '',
      phone: '',
    }
  },
  methods: {
    send() {
      // send this.user through http
    }
  }
});

And my template is like:

<form @submit="send">
<input name="username" v-model="user.name" />
<input name="surname" v-model="user.surname" />
<input name="phone" v-model="user.phone" />
<button> send </button>
</form>

In such scenario, you have all the user information in your component/instance via this.user. You don’t need to send this.$data at all if you create an object to manage your form fields (like this.user in this example).

👤Sergeon

Leave a comment