Vue js form submission method

Question

I'm relatively new to Vuejs & am trying to get this form working but it keeps showing me these errors when i submit. Can anyone guide me on this?

<template>
  <form @submit.prevent="handleSubmit">
    <input class="input" type="text" v-model="user.name">
    <input class="input" type="text" v-model="user.email">
    <input class="input" type="text" v-model="user.phone">
    <button class="button is-primary" type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        email: '',
        phone: ''
      },
      test: "BEFORE SUBMIT"
    };
  },
  method: {
    handleSubmit() {
      let user = new user({
        name: this.user.name,
        email: this.user.email,
        phone: this.user.phone,
      });

      this.test = "AFTER SUBMIT";
    }
  }
};
</script>

tao · Accepted Answer · 2019-05-28 17:51:24Z

2

You're calling handleSubmit method but you haven't defined it on the Vue instance.

That's because you should call the Vue instance property methods, not method, even when you have only 1 method.

answered May 28, 2019 at 17:51

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js form submission method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related