Vue-next: Provide a way to pass modelModifiers to a native input

[pearofducks]

What problem does this feature solve?

Currently there's no way to pass the built-in modifiers to a native input. So wrapping a native input now would need to duplicate code that the vModelText directive already seems to include - or eject to a render function.

<my-input v-model.lazy="foo" />

...

MyInput.vue

<template>
  <input v-bind="$attrs" v-model="model">
</template>

<script>
import { computed } from 'vue'

export default {
  setup: (props, { emit }) => ({
    model: computed({
      get: () => props.modelValue,
      set: v => emit('update:modelValue', v)
    })
  })
}
</script>

What does the proposed API look like?

I don't have any strong opinions here - the native input could simply look for modelModifiers so that v-bind="$attrs" "just works"?

[posva]

Do you mean being able to write

<input v-model="model" v-bind="{ modelModifiers }">

[pearofducks]

@posva - Yeah, same intention - that modelModifiers is a recognized "prop" for a native input instead of being treated as an unknown HTML attribute - and that any built-in modifiers are used. Sorry if my example wasn't clear!

Again, I have absolutely no objection to this functionality being provided some other way, but needing to eject to a render function (the only way I can see how to do this) seems like a lot of effort.

[HcySunYang]

This one won't work correctly:

<input v-model="model" v-bind="{ modelModifiers }">

Maybe we need to support dynamic modifiers:

<input v-model.[dynamicModifiers]="model">

The value of dynamicModifiers can be:

• string: 'foo'
• Array<string>: ['foo']
• object: { foo: true }

So that we can manually bind the modifiers passed by the parent scope:

<input v-model.[$attrs.modelModifiers]="model">