Vue v-model in child components and defineModel

Подписаться 54 тыс.

Просмотров 8 тыс.

50% 1

We look at a few ways to use Vue's v-model in your child components. This includes a manual implementation, using writable computed, using a composable in the VueUse library, and using defineModel which is currently experimental in Vue 3.3.
GitHub Repo: github.com/drehimself/vue-vmo...
RFC link: github.com/vuejs/rfcs/discuss...
LINKS
My courses: codewithdre.com
Sign up for my newsletter: andremadarang.com/newsletter
My website: andremadarang.com
Twitter: / drehimself
GitHub: github.com/drehimself
CodePen: codepen.io/drehimself

Наука

Опубликовано:

5 июн 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 24

@drehimself 6 месяцев назад

defineModel is now stable in Vue 3.4: blog.vuejs.org/posts/vue-3-4#definemodel-is-now-stable

@whatsupbudbud 5 месяцев назад

Loved your structural approach from least to most abstract.

@user-eh6sf2lg6e 11 месяцев назад

So glad I found this video. I just started working with Vue after React and this topic was very confusing for me. Especially since the same thing can be done in different ways. Thanks!

@maxralph01 Год назад

Wow ! Been a while, Andre ! Single-handedly, your e-commerce video series made me an intermediate Laravel developer. Returning to say "Thank you" !

@claytonnighthawk7837 2 месяца назад

Thank you, this was a really helpful explanation!

@oketafred Год назад

Awesome content Andre

@aissa.bouguern Год назад

Great and informative video as usual!

@N1mdae 8 месяцев назад

This video was very helpful, thanks

@ulugbekatakhanov1431 11 месяцев назад

the best explanation. Great.

@ivan4486 3 месяца назад

This is so helpful! Thank you so much!

@devmenezes Год назад

Nice content, Andre.

@keno571 Год назад

Thanks for the great video! Looking forward to more :)

@acerhigh09 24 дня назад

defineEmits not needed when using defineModel, are still there in the defineModel example, but perhaps that implicitly meant

@isabelphillips451 Месяц назад

Thank you for this 🤗

@johnnydriesen7575 Год назад

Excellent Vid. Very well explained. Thanks for willing to share your knowledge, and taking your time to create this vid. Question to you.. R U a fan of TS ? And if I can ask ... Why (not) ?

@drehimself Год назад

I've only used TypeScript at a very basic level, I haven't really used it for any major projects. I understand the benefits, and I think you'll only see them if you really decide to go all in. Vue 3.3 has made some considerable improvements to using TS within Vue, so maybe we'll see more Vue devs using it. Check out this talk by Tanner Linsley (author of popular React libraries) who outlines his journey from non-TS person, to all-in with TS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-O4IWJcafX8c.html. I think this is how most TS users feel.

@johnnydriesen7575 Год назад

@@drehimself Thank you for your reply ! Highly appreciated.

@codedjango Год назад

Thanks....followed your tutorial n works very well, however, in Vue DevTools, in the child component, it shows: event-listeners: update:model-value: not-declared Is it that Vue devtools is not ready for this "defineModel" macro? Please suggest

@EduardoDonato82 9 месяцев назад

Hi, what vscode theme are you using?

@mikeywork6348 9 месяцев назад

Does this work if the modelValue is an object that contains arrays?

@munandisichali605 Год назад

Any full courses that will come from you?

@drehimself Год назад

Possibly in the future, for now, just trying to get some steady content going here on YT.

@Skia_ Год назад

If you try to console log the name ref in the app component, the value will not update in the console when the input value changes. Can someone explain to me why? I am a React developer How can i make the name ref update in the script tag? Thanks in advance

@whatsupbudbud 5 месяцев назад

Question is where in the App component lifecycle you're console.logging it. If you did it just in the script tag, that would be similar to doing once on mounted.