Submit form array with Vue to Laravel

Question

Before I started using Vue I had a simple form that would update 1 value on 1 column @ 1 request at a time. Now I am using Vue and my form has a new 'middle' button that is being used to build up an array of items to submit 1 request to update multiple columns dynamically.

Problem is now that prevent default is enabled, my original form submission no longer works and I need to either submit the request with Vue or is there a way to re-enable default action on a button? This would be great.

<form @submit.prevent="newbutton">

// new button
<button @click="newbutton"></button>

// original button
<button @click="submit" :id="{{ $element->id }}></button> // @submit.enableDefault ??

Austio · Accepted Answer · 2017-02-21 13:00:00Z

1

The prevent is just a helper method on the @submit. To allow this variance you will need to move the logic into your newbutton method

// in template remove prevent
<form @submit="newbutton" action="/where-this-should-post">

// in script move logic to your newbutton method
methods {
  newbutton(event) {
    if (formNotValid) {
      event.preventDefault()
    }
  }
}

edited Feb 21, 2017 at 13:00

answered Feb 21, 2017 at 12:52

Austio

6,0951 gold badge23 silver badges35 bronze badges

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

9 Comments

Dazzle Over a year ago

Interesting! How do you test for formNotValid? Thanks for the help!

Dazzle Over a year ago

No need to test for formNotValid, just fired event.preventDefault(); in the middle button and took out @submit.prevent and it works nearly as expected. Problem now is binding the vue data to form submission

Austio Over a year ago

It can be a computed property or you can create a function and call that. It will look at all the data in your form and make sure it is OK to send it along.

Austio Over a year ago

Also is not required to have that is just easier in spas to knock that out on front end

Austio Over a year ago

Ok, that sounds like a separate issue where you are not settings the data using vm.set ([] is not reactive in vue). You should first see if submitting this works with moving event.preventDefault as described above by just posting up something like string 'foo' using axios. If the data gets there then create a new question with the new issue, will help others in the future. Also always best to add a jsfiddle with example.

|

Collectives™ on Stack Overflow

Submit form array with Vue to Laravel

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related