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">

[justDabuK]

I just encountered a similar problem. I just found that issue and see that it is closed, but I didn't see any explanation on how this is solved now. Did I oversee anything? 🤔

In order to give some context to my "similar" problem, I want to dynamically use .lazy. Or to frame it in a better way, I want to pass down the .lazy modifier from my custom component to the input inside this custom component. Such that using .lazy on my custom component

<CustomComponent v-model.lazy="importantValue" />

will lead automagically to applying it to the input inside of CustomComponent

<input v-model.[modelModifiers]="inputValue" />

Is this solved somehow or was this ticket just closed by accident? 🤔

[ByScripts]

I also find it strange that this ticket was closed as "completed".

I'm unable to pass .lazy modifier from my custom component to native input.

[jonathanjameswatson]

It looks like this issue was closed due to commit 128ec46.

This commit indirectly solves this issue for .number and .trim modifiers by applying their effects to v in emit('update:modelValue', v) on the wrapper component. v itself from the input has not been cast or trimmed.

For example, if we have <my-input v-model.trim="foo" />, then foo will be trimmed. This does not modify the behaviour of v-model in the inner <input v-bind="$attrs" v-model="model">.

However, if MyInput.vue is instead:

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

Then the modifiers of the inner v-model are effectively changed to include .trim. Ideally, we would have the same behaviour for components and native input.

For this reason, when we have <input v-bind="$attrs" v-model="model">, I think it would be reasonable for model to be trimmed when modelModifiers includes trim, cast to a number when modelModifiers includes number, and updated lazily when modelModifiers includes lazy. This is the most useful for lazy, which is currently neither passed to the native input nor addressed by 128ec46.

One issue is that in most cases, this would result in repeated trims or repeated casts to numbers when this is not necessary. Therefore, it might make sense to automatically remove trim and number from modelModifiers in fallthrough $attrs? However, this would probably be confusing.