DEV Community

loading...

Discussion on: VueJS - Different ways to implement v-model

Collapse
srikanth597 profile image
srikanth597 • Edited

Hey good article.
But in your 1,2,3 you wrote Baseinput v-model="text" .
And in component props, it was written as
value:String
Which doesn't sound correct to me , was it a typo?.
In 4 & 5 also , emit event is not declared on component definition and also when u call Baseinput u were not specifying the custom emit event which is "update".
U just used v-model everywhere, is this correct?

Collapse
vcpablo profile image
Pablo Veiga Author

Hey @srikanth597 thanks for reading and participating.

Explaining 1, 2 and 3.
By default, v-model on a component uses value as the prop and input as the event. So that's why I use v-model on <BaseInput /> usage and, inside it, there is a prop called value. The value of the P text variable will be bind directly to the default prop value.
(Check: Customizing Component v-model (VueJS docs))

In regards to 4 and 5, as a component is, by default, a reusable instance Vue, therefore I don't need to define the $emit event manually, because it is already present in the component implicitly.
(Check: Base Example (VueJS docs)

Now, talking about the update event, in both 4th and 5th examples, the model property is responsible to configure the update event, as the one that will update the v-model, which is, in these cases, represented by the text prop.
(Check: Model (VueJS docs

Cheers!

Collapse
srikanth597 profile image
srikanth597

Thanks for ur reply,
So if I understood correctly Vue automatically figure out v-model='text' as value prop automatically in component definition.

This arises wierd doubt in my mind, what happens if for some reason I want to have 2 v-model properties I need to pass to component.

I understood your 4&5 point explanation

Thread Thread
vcpablo profile image
Pablo Veiga Author

Hey @srikanth597 , in the latest released version of VueJS, v3, it is possible to bind multiple v-model’s
Take a look at this article to understand a bit better.

dev.to/thomasfindlay/how-to-easily...

Forem Open with the Forem app