How to properly post data from vue component to laravel controller

Question

I'm using laravel, blade and Vue.js. So what i'm trying to achieve is to send a prop from a Vue.js component together with everything else in the form. The problem is that the main part of form is in blade but the prop is within a Vue component (the prop is an array of objects and is not stored within an input field, so I can't get the data when form is submitted).

I know that I can send the array through axios, but for that to work, as far as I understand, I need to put the whole form in the Vue component - which I don't want to do as I have 2 seperate Vue components in the form.

What I'm asking is could I somehow make so that the component "returns" the array like a value of an html input field when the form is submitted. The point is that the basic form inputs would stay in the blade file and custom vue components would be in their seperate files.

I'm asking this because copying the whole form into the vue component seems extremely wrong to me - I might also be extremely wrong :)

Thanks for any info in advance!

Israel Ortuño Israel Ortuño · Accepted Answer · 2021-08-11T00:12:17

I do not see why it's wrong to have the form in a Vue component, should be totally fine and you will have way more control about the data.

That said, if you do not want to do so, you can capture the form submission event and extract the form data, then inject into your Vue component and make the request. Example:

<form id="myForm">
...
</form>

Then in your Vue.js mounted hook:

mounted() {
  const form = document.body.querySelector('#myForm')
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    // Here you could query the inputs you need and extract the data you need
  });
)

How to properly post data from vue component to laravel controller

1 Answers