[Vuejs]-Vuejs v-model binding with a select box inside a slot

by

1👍

✅

Gosh, I keep posting here and finding an answer afterwards.
4 hours of googling – nothing, then I post here and suddenly come up with a solution.

For anyone having the same issue, this is caused by the fact that all non-components, if you apply $emit to it, it’ll be called from <Root>, meaning you have to edit your:

created()
{
    this.$on('update:selectedId', (value) =>
    {
        this.selectedId = value
    })
},

And change it to this:

created()
{
    this.$root.$on('update:selectedId', (value) =>
    {
        this.selectedId = value
    })
},

-1👍

You can pass a callback as a slot prop that will modify the data being passed also as a slot prop, here’s an answer of mine on a similar question v-model and scoped slots not working?

Leave a comment