.sync vs v-model

#1

Is there any practical difference between .sync and v-model on a component?

Both seem to do the same thing:

.sync:

<comp :value.sync="bar"></comp>

expands to:

<comp :value="bar" @update:value="val => bar = val"></comp>

v-model:

<comp v-model="bar"></comp>

expands to:

<comp :value="bar" @input="val => bar = val"></comp>

I’ve updated the attributes in the links above to make the comparison clearer (hopefully I’ve not mistyped them).

The differences I can see are:

  • the default prop name
  • .sync allows you to use multiple props
  • the event name you emit from your component

I ask as I’m about to go through our component library and bring some consistency to it / remove some bugs.

We’re currently using .sync but I’m wondering if v-model would be more obvious.

Cheers,
Dave

9 Likes
#2

.sync was added after we had added v-model for components and found that people often could use that v-model logic for more than one prop.

So they essentially do the same thing.

13 Likes
Is it possible to add computed properties on the fly?
#3

OK, good to know. Thanks!

Edit; would be good to make that clear in the docs, perhaps even with a comparison like the above.

8 Likes
#4

I have to admit that I was totally lost between the 3 forms (regular full long one, sync and v-model), unable to understand why the latter 2 were co-existing.
Thanks for the precision !

1 Like
#5

Just to add to your question, I believe its important to note that:

<comp v-model="bar"></comp>

actually expands to:

<comp :modelValue="bar" @input:modelValue="val => bar = val"></comp>

With this in mind, it makes sense to use:

<comp v-model="bar" :value="foo"></comp>
#6

@osvaldoM This was a Vue 2 question (4 years ago now!).

You might want clarify you’re talking about Vue 3 changes, and perhaps provide a link:

https://v3.vuejs.org/guide/migration/v-model.html#using-v-bind-sync

2 Likes