Why I Don't Use v-model In Forms in Vue.js | Form Tips
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- 👉 Check out my course - bit.ly/2OETt0M
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
• How Do You Land A Web ...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Start with Nuxt!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 week course on vue!
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 ! 💻
The Complete 2020 Web Development Bootcamp - Angela Yu - bit.ly/2ADKEKD
→ JAVASCRIPT ALGORITHMS COLT STEELE'S COURSE - bit.ly/2L8HSPV
→ THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
Links
/ erikch
gist.github.com/ErikCH/97e36f...
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.
I disagree... Erik's way is much more valid and shows proper form building techniques.
v-model is fine for small forms... but I recently built a form for an ecommerce checkout using vue and v-model... the form has 30+ fields (with lots of hidden fields and conditional fields etc)... v-model gets extremely hard to maintain since the values are spread across the code. Whereas Erik's method keeps all that logic inside the function.
Also, v-model is for reactive form values... and if you need the form values to be reactive (say if you want to do live calculations as the user types) then v-model does the trick. But for plain forms, where the form inputs don't need reactivity, then Erik's approach is the most maintainable and bug free way.
@Ray Lawlor said it best . And you should always add name tags, when you create a proper form.
@@ProgramWithErik How are you handeling validation. As in real time validation towards the user? (Vuelidate as an example)
I agree to an extent. First of all, it's always a good idea to build apps with semantically valid HTML. There's a lot of accessibility issues if you don't and you don't want to exclude some people from using your apps and you don't want to get sued either.
But as others pointed out, not using v-models and instead using event targets to manually assign values to variables is pointless, because you explicitely avoid using the framework's mechanisms. That leads to inconsistencies between your form data and your application data (always aim for a single source of truth) and you can't easily prefill fields, thinking of autocompletion.
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 on top of that :D
So, basically that's more o less what we used to do before reactive frameworks 😉
My thought exactly :P
Awesome as always 👍😀
Love this for very simple forms!
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.
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!
Awesome tut! Worked fine for nuxt 3 as well. Thank you man for this fromEntries method. I did not know it exists. :)
Thanks a lot, Erik! its awesome
Great video. It is nice to see a video on forms that is unique.
I appreciate that!
Thanks a lot, Erik! That was some really interesting content :)
My pleasure!
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.
This is good situational knowledge, thanks
Wow, this was really gr8 video, learnt a lot. Thanks
That's pretty cool!
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!
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?
I like the @submit.prevent approach you take instead of binding the event to the submit button. Thanks!
This is awesome, Thanks.
You're welcome!
Im glad to see very good use of well practices
Nicely done and explained very well.
Thanks
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
Thanks for sharing 🥰
No problem 😊
Keep it up, your videos are good.
Cool!!
Vue formulate is your friend when it comes to forms, at least for Vue2.
It's good too.
I've have never seen that package before, it looks so awesome
Oh. Wow. This is kick ass. Thank you for mention this library. 🎊🎊🎊
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.
You are amazing.
Nice tip 👍👍
Thanks
Does this works with forms with nested custom components?
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,
Is it better to put validation in html or in JS file ? because html can be modified
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
I’d say it depends. If I have 10 form inputs this strategy work even better. It’s 10 less places I have to go and add a v-model and track. But on the other hand, if I need complex validation then don’t use it. And yes you could start without Vue and add it later
Exactly my point. There's just no reason to do this.
thanks
soo cool
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
That's true you can't all together get rid of it, for some scenarios
There's no reason to "get rid of it". It's an essential Vue feature. If you don't want to use v-modal drop the frameworks altogether and write vanilla js. The video is click bait - its promising to show why not using v-modal is a good idea but what it does is explain you can use a workaround hack to get the form field values from the event object. Interesting, sure, but pointless.
@@yoggg932 There's nothing "essential" about any feature unless there's a gun pointing at your head to use it. The features are there, and it's up to you to consider the complexity, performance and readability when choosing to use them. I can use Vue for the dynamic component loading, SPA routing and stuff, while keeping forms as vanilla as possible for best performance. If you have used v-model for big fields you would have seen that frequent inputs can trigger the browser GC, and slow the page down significantly.
Hey Erik, your video is entitled Why I don't use v-modal in forms but I'm not sure If I got an answer watching it. Is there a specific reason you'd rather write MORE code and get the data manually? I don't see any. Thanks!
Yeah, watch the whole thing again. Or check the time stamps. I clearly go into how you can remove v-models
@@ProgramWithErik you say how, but not why. What is the benefit of using the event object instead of v-modal?
@@ProgramWithErik but why? Explained that you can, and how to get that data. But I also don't see any reason to why you would want to do that.
@@yoggg932 a few reasons. At that point your using JavaScript, so your removing one layer of abstraction that isn’t always needed. If you add extra inputs or form elements you don’t have to add another data element to Vue and add v-model. If the data doesn’t need to be reactive then this makes even more sense. All the data is centralized in one place now, and you can send it to a server or update it. Or combine it with other data , or save it into vuex. I also think it’s a bit easier to read
@@yoggg932 also there is a debate whether data really should always be 2-way data bound. This would essentially make it one way, on submit.
That was cool,
Make more videos on, short tips like this ❤️
Thank you! Will do!
what is that orange with >< in your vscode bottom left?
I’ll check it out
This is my first time seeing the "pattern" option on html tag, thanks
You're welcome!
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
Just tried this and it seems event has been depricated so this method won't work anymore
Nice video! But I’m not sure you actually talked about WHY you do it this way (as the title of the video says)
I mentioned in an earlier comment this technique simplifies your html and javascript and is good in certain situations, for example submitting data to a server.
Thank you for the video!
Personally, after adding oninvalid="this.setCustomValidity('Some Error Message')", field becomes invalid until page refresh. The solution was to add - oninput="setCustomValidity('')"
Well. This was a good hack. If you don't want to use v-model or Vue libraries for validation, then there is no need to use Vue in the first place. Vanilla JS and barebone HTML5 is sufficient. It is funny to bring in Vue into your HTML and then decide not to use v-model for forms.
I LOVE YOU
I think this way also same v-model, Name attribute required when without using v-model
Yeah I thought the same thing especially assigning values this.name = ... The same v-model does and in the nicer way (IMO)
Yeah, but you should be using the name attributes anyways, that’s proper htm
this not working for checkbox sir? i checked 2 item but show only 1 item :)
It should work too, you just have to name each one correctly
@@ProgramWithErik can u give me sample?
I've tried with name="sample" and name="sample[]"
but I still get strings instead of arrays
This approach with Object.fromEntries(formData) will fail for form elements with the same name (e.g. checkboxes). Object cannot have keys with same name
That's a good point! I think there is a way around that, but it does have that limitation.
Fun to see what's possible, but in my opinion overcomplicated. Why would I try to remember this complicated line of getting the form data from the event, the code with v-model is in my opinion much much cleaner and better to read! Also, I can just use a watcher with an regex to implement any input checking I want and customize the look and feel of the response to what I want for my website, instead of being stuck with the browsers default. As I said, cool to learn something new! But in my opinion absolutely not the way to go.
you sped through line 106. That was the most important part of the video and i would love to see 5 mins spent on that line alone
Good point I need to slow down a bit
@@ProgramWithErik thank you for your content btw. I'm trying to get my breakpoints to work by watching your vue and vscode debugger vid right now
Works only if your form is EMPTY.
IF you have an EDIT FORM which has to present pre-populated current data it's a pain in the ass to manually assign each value before hand.
That free cheat sheet link is not opening
Thanks! I'll look into it.
👉 Sign up and get free Vue cheat sheets and updates!
vuecourse.tech
IMHO not using v-model (or v-on:input + v-bind:value, which is something very powerful that anyone using Vue should know) is very very wrong. At first because Vue is built around reactivity, and you _must_ follow its conventions. If you use conventions, the other developers will understand your code in no time. What you do with FormData is the typical "good to know" thing, but a very wrong habit that impacts yours and your colleagues code, according to me (and my experience).
IMO this is a powerful pattern and shouldn’t just be dismissed. Why needlessly use a v-model when you can use basic javascript to do the same thing? Developers could easily understand this convention, it’s literally HTML/JavaScript with a submit event.
@@ProgramWithErik I agree with you about how powerful is this pattern when used with bare JS/HTML, and every FE developer should know it (I forgot to thank you for the interesting video!). But you are using a framework built entirely around reactivity and this pattern breaks it: I would use it when using jQuery or JS, not Vue.
Nice but you need to try inertia vue.. :)
*proceeds to paste v-model in all 79 gender options*
nice approach tho, but its overkill for me, i prefer to keep it simple and readable
Exactly, I wouldn't be able to tell what's happening in my code after a month with those entries and form objects.
@@spythere that's why you move on and get the next job.
Fair enough! You get used to it though.
v-model looks way prettier for me... But I am also the one who hates the react className with curly brackets {}... i mean it is way easier for me to just add a : to switch contexts... I do not understand why I should hack it with formData, when it is already supported by Vue with the v-model. For me it sounds like a react developer is talking about Vue...
yeah, I write really ugly vue code
For vanilla JS is for sure a good method to go (Probably the best one for most cases), but why use Vue if this destroys real reactivity? I don't see a point here.
angular gang must be laughing right now 😎
Why?
@@rniestroj in angular handling even the most complex forms is a piece of cake... Because of so many built in functionalities that it provides.
Actually, I don't see why you would go this route in vue either.
react users laughing at y'all anyway, angular dead asf
This prevents you from having a dynamic form - your videos are good, man, but this one restricts so much for almost zero gain.
Ok, with all this being shown, why we even need Vue for simple form like this? No disrespect for Vue, just asking :)
You are right. This has little to nothing to do with Vue. Everything shown is really doable/done through HTML5 and Javascript.
For something like this, probably not. But if you're looking to have routes, multiple pages, talk to a backend api, share data, then yeah Vue would be helpful.
I don't understand how using name vs. v-model cleans up your code. I'm fact it forced you to add more code. You could instead omit the name field on the inputs and only use v-model.
But you should be adding the name attribute to your inputs anyways if your using forms. That’s just good practice. Like adding a type...
@@ProgramWithErik thanks for the reply Erik, love the content by the way and the promotion of vue. I'm still not really seeing the advantage here when you just end up destructuring the values back into the data variables.
That's basically just for when you need nothing but a pure form
Eric, I don't know if you'll see this comment, but next time use "zz" to shift the code so that the current line is centered
You’ve managed to bypass Vue while boxing yourself in for future growth.
Why why? v-model is basicly and you don't have to go back to the past.
What your thumbnail speaks is :
RIP Eric,reason( exposed vue forms )
Haha
This is ridiculous. Why do you have to complicate something that is already designed well out of the box.
Using `FormData()` seems so 2002
Lol
all was cool until you add the line of formData :D
Haha
I am giving a thumb up before even having watched. As a sign of appreciation for this topic. Will watch later!
Thanks!
You should call the video "why I use javascript instead of vue" because this basically is 99% virgin javascript and html.
Maybe next time