[Vuejs]-Two way prop data-binding using sync in Vue JS components

by

3👍

✅

This is the culprit:

v-model="selectedList"

which is equivalent to

:value="selectedList" @input="selectedList = $event"

As you can see, you are assigning to selectedList in the handler for the input event.

When you are designing components in this way, be sure not to bind props with v-model, instead you have to handle the input event explicitly:

:value="selectedList" @input="$emit('update:selectedList', $event)"

Also I don’t understand the purpose of the watcher? The prop should only change from the parent down to the child, so why would you need to emit an update back up to the parent in response?

👤Decade Moon

Leave a comment