Why I Don't Use v-model In Forms in Vue.js | Form Tips

Use v-model in vue forms is really common, but is there a better way? In this video I discuss how I grab form data a different way and how you may do to. Also I look at form validation. #vuejs #vueforms #vue3

👉Check out my last video on Landing A Web Dev Job

👉 Sign up and get free Vue cheat sheets and updates!

Need to Learn Vue or Nuxt? Check out my courses below!

0:00 Introduction
0:33 What this form does
01:30 How to add v-model the normal way
04:30 Form Submit Events How-To
06:23 Handling Data without a v-model
09:18 Handling Form Validation Without 3rd Party Plugins
11:37 Conclusion

♡ ♡ ♡
Make Sure To Check These Courses Out On Udemy ! 💻

Links

[adambright]

Your approach for it definitely lessens the amount of code in this case, but it removes the ease of accessing specific values whenever you want and introduces unnecessary formdata creation and deconstruction. I mean, you do you, but I will keep using v-model with :rules (vuetify) and <v-form v-model> on top of that :D

[ProgramWithErik]

👉 Sign up and get free Vue cheat sheets and updates!

[Electricity]

V-model is working perfectly fine. You did not explain why you did away with it in the first place, but secondly you made the whole scene even more complex. You say that with this method you don't need the v-models on all the inputs anymore, but you do need name-tags and form destructuring and assign all of the variables again to our vue props. This is so much more work and less maintainable.

So, basically that's more o less what we used to do before reactive frameworks 😉

[PaulCozma]

Nice idea, always hated i have to add reactive data for each input in my forms, sometimes I only need to send the data and that's it.

[wforbes]

Thanks, that's definitely worth keeping in the toolbox. I don't think this a reason to do away with v-model or anything (as others mentioned, vuex, props, etc.)... but rather, an idea of something to go with when not using v-model.
Your mention of the default browser validation is a cool reminder. So often I'm not fond of vuetify's validation messages being packed into its input elements and hogging vertical space. Gonna play around with incorporating that setCustomValidity and see where it goes!
Thanks for your videos Erik!

[BlurryBit]

Awesome tut! Worked fine for nuxt 3 as well. Thank you man for this fromEntries method. I did not know it exists. :)

[robinatorps]

I could see this approach help developers to be more or less "forced" to follow web standards, which will improve accessibility etc.
My biggest caveat with this is that you are working against the framework instead of with it.

One example comes to mind if you need to repopulate the form after a refresh or similar, this would be taken care of with persistent vuex and v-model. This happens quite often if you need to redirect back after a backend validation error or just that you lost connection and need to revisit it later.

Another simple example are CRUD apps, being able to reuse the creation form component for updates makes the codebase SOO much easier to maintain.
Now you need to rebuild all of that reactivity on your own for no real reason.

[brokula]

At that point you are already accessing WebAPI which is a platform specific implementation. Imagine if it's some other platform like mobile phone. V-model is clear API towards data mutation/rendering and if all components stick to it that makes it a sort of pseudo language. You always know how specific components talks to your data.

[alexnaumann]

Thank you for the video!
Personally, after adding Error Message')", field becomes invalid until page refresh. The solution was to add -

[rajikkali]

Vue formulate is your friend when it comes to forms, at least for Vue2.

[johnnybravoh]

I like the @submit.prevent approach you take instead of binding the event to the submit button. Thanks!

[mohaiyedin]

Thanks you so much...learn a lot from here...

May i know its have any tutorial when we submit the form it will reset to the default value...thanks

[EzequielRegaldo]

Im glad to see very good use of well practices

[magdasmircea]

You said you simplified the form removing v-model, i'd argue you made it more complex. By your logic in this video why use vue at all? This example will not scale to a medium to large app since you will want state management and complex validators and custom events functionalities

[alexrogers]

I enjoyed the video. Seeing a lot of the same comments below so I'll just say thanks for making vue content, it's fun!

[mamangboi]

this is realy helpfull when you build some parameterize form input where user actualy create form from databsae and looping it to be some html tag and not form manually code,

[VitorGuerreiroVideos]

Nice! The FormData object is a nice one, but I think the 'usual' v-model allows for better UX with more 'real-time' validation and proper custom validation. But I'll play a bit with that! Would you have any ideas on how to 'subdivide' forms into separate child components? I looked around and it was a bit of a weird setup. How would you subdivide a big form with lots of inputs into smaller components that would feed the larger component with the actual form, submit, etc?

[aram]

Getting rid of v-model is tempting, but what if you need to pre-populate form with datq from backend? I would be curious to see a video on using forms with vuex/compositionAPI

[DontFollowZim]

Throw the 'method' and 'action' attributes on the form and suddenly you've got progressive enhancement. Of course, using v-model instead of FormData still gives you the same progressive enhancement.

If your form is submitting file data to the server, this method is really good because you need to use FormData anyway for the async upload. Can't send file data in JSON. So I can see some use cases for this, but if you want on-the-fly validation (which is generally better UX), you're either using v-model or custom event handlers... or some form validation library is doing a lot of it for you