Vue Laravel submit form using button in other component

Question

I have two components:

Header.vue:

<button type="submit" @click="clickNext">Next</button>
methods:{
    clickNext(){
        Bus.$emit('submitForm');
       }
    }

And Home.vue

<form method="POST" ref="my-form">
    <input type="text" name="email" id="email" />
</form>

  created() {
    Bus.$on('submitForm', () => this.$refs['my-form'].submit(this.send()))
  },
  methods: {
    send() {
       console.log("send!");
    }
  }

I need send form (with component Home.vue) using button which is in Header.vue component. When I click Next button Laravel REFRESH PAGE and return error:

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException

No message

score 0 · Answer 1 · answered Jun 27 '19 at 11:57

0

You have to have CSRF token in every form that does any method except GET. Read on it in official docs

answered Jun 27 '19 at 11:57

makstech

68
1
9

I have CSRF token in blade and in this blade I have redirect to Vue: `
` – michal Jun 27 '19 at 12:00
1

Could [this](https://stackoverflow.com/questions/19760585/laravel-throwing-methodnotallowedhttpexception) be the case? – makstech Jun 27 '19 at 12:03

Vue Laravel submit form using button in other component

1 Answers1