Officially support `v-model` with `<slot>`
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>
I made a POC in Stackblitz, showing that it technically works.
https://stackblitz.com/edit/vue3-vmodel-with-slot?file=src%2FApp.vue
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.