Subscribe on changes!

Officially support `v-model` with `<slot>`

avatar
May 11th 2022

What problem does this feature solve?

Currently, it seems that v-model is not supported with Vue <slot>. This is the current ESLint rule, which does not allow v-model in <slot>:

https://eslint.vuejs.org/rules/valid-v-model.html https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-model.js#L32

But now with Vue 3, event handlers such as @update:modelValue are passed as props prefixed with on, so technically they are available as slot props.

What does the proposed API look like?

(This is currently technically possible, but not very elegant)

MyComponent.vue:

<slot v-model="data" />

App.vue:

<MyComponent v-slot="{ modelValue, 'onUpdate:modelValue': onUpdateModelValue }">
    <input type="text" :value="modelValue" @input="onUpdateModelValue($event.target.value)"/>
</MyComponent>

<!-- It would be awesome, if something like this would automagically work: -->
<MyComponent v-slot="{ modelValue }">
    <input type="text" v-model="modelValue"/>
</MyComponent>
avatar
May 19th 2022

I made a POC in Stackblitz, showing that it technically works.

https://stackblitz.com/edit/vue3-vmodel-with-slot?file=src%2FApp.vue

avatar
Feb 24th 2023

Would also like this implemented.

avatar
Mar 22nd 2023

Any news on this one? The migration from Vue 2 to Vue 3 proposes to use slots as a replacement for inline-template. So far I also had issues with v-model not working on scoped slots.

avatar
Aug 30th 2023

Any updates?