'.sync' modifier on 'v-bind' directive is deprecated

[andrei]

I am using v-snackbars like this:

<v-snackbars :messages.sync="snackbars" :timeout="10000" bottom left color="red"></v-snackbars>

Which triggers the following error:

  16:20  error  '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead  vue/no-deprecated-v-bind-sync

I tried changing that line to:

<v-snackbars v-model:messages="snackbars" :timeout="10000" bottom left color="red"></v-snackbars>

This renders my app just fine, but if I push a string to snackbars, no snackbar is shown.

Edit: I am using Vue 3.2.13 and Vuetify ^3.0.0-beta.0

[Aymeric]

I don't use Vue 3 yet. I'll have to read the documentation to know the differences.

[Greg Veres]

Vue 3 removed .sync in favour of the new syntax for v-model. @d4rckh showed the new syntax with v-model:messages.

Since the .sync syntatic sugar went away in Vue 3, you will have to revert to the long form in your code @d4rckh. Try this:

<v-snackbars :messages="snackbars" @update:messages="snackbars = $event" :timeout="10000" bottom left color="red"></v-snackbars>

This is what Vue 2 was doing under the covers anyway. It should work but I haven't got an easy setup to try it.

[Aymeric]

Thanks @gregveres