DEV Community

How to make a form handling with vuex

Matheus Gomes πŸ‘¨β€πŸ’» on December 30, 2019

Problem Let's say you want to save the input of your form on the state of vuex. Maybe someone new to vuex would try something like this...
Collapse
Β 
vamsigandra profile image
Vamsi β€’

Thanks! This is exactly what I am looking for.
Where do you call the mapFields function. Could you please show an example?

Collapse
Β 
lilarmstrong profile image
Armstrong β€’

I think if you do something like

...

Then, in your methods you define the 'handleSubmi function as follows:

methods:{
handleSubmit(e){
e.preventDefault();
mapFields(e)
//...
}

I think something like the above would do... what do you think?

Collapse
Β 
matheusgomes062 profile image
Matheus Gomes πŸ‘¨β€πŸ’» β€’

I would use it in the computed property, so i could change the state as i input .

Collapse
Β 
matheusgomes062 profile image
Matheus Gomes πŸ‘¨β€πŸ’» β€’

My fault, I will edit the post to answer you, sorry for this and thanks for asking.

Collapse
Β 
mordechairoth profile image
mordechairoth β€’

Thank you! for this amazing super cool solution. I was searching the web for a normal not redundant way to deal with forms when using Vuex and thank god I bumped into this post. This is an amazing and easy solution, thanks.

p.s. there's a syntax error in the example 'const fields = [options.fields[x]]', the outer square brackets should be removed.

Collapse
Β 
lilarmstrong profile image
Armstrong β€’

Lovely... lovely article. Thanks

Collapse
Β 
themsiqueira profile image
Siqueira β€’

Congratulation, it’s a great article!

Collapse
Β 
matheusgomes062 profile image
Matheus Gomes πŸ‘¨β€πŸ’» β€’

Thanks man!

Collapse
Β 
wakeupmh profile image
Marcos Henrique β€’

Awesome post, congrats gomito 🀘

Collapse
Β 
assoft profile image
Assoft β€’

This is awesome. Thank you.

Collapse
Β 
dcruz1990 profile image
Dennis Quesada Cruz β€’

WoW! Awesome! i was looking for some like that!!

Collapse
Β 
unaimian profile image
U.N β€’ β€’ Edited

Thanks for this elegant solution. But what about nested fields in base? It doesn't seem to be working for nested objects

Collapse
Β 
sergiosuramin profile image
sergiosuramin β€’

can you show us your store?