-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow to pass an object of modelModifiers to native inputs #8281
Comments
+1 for this, seem odd in order to simply wrap an input and provide support for .lazy you need to this: <script setup lang="ts">
import { defineModel } from 'vue'
const [model, modifiers] = defineModel<string>()
function input(event: Event) {
if (modifiers.lazy) {
return
}
model.value = (event.target as HTMLInputElement).value
}
function change(event: Event) {
if (!modifiers.lazy) {
return
}
model.value = (event.target as HTMLInputElement).value
}
</script>
<template>
<input :value="model" type="text" @input="input" @change="change" />
</template> |
Are there some updates on this issue? |
@Magentai unfortunately not |
I found the place where the modifiers are parsed: core/packages/compiler-core/src/parser.ts Lines 277 to 278 in 0c8dd94
If modifiers can be dynamic, this has to be handled similar to here: core/packages/compiler-core/src/parser.ts Lines 253 to 259 in 0c8dd94
If that's done, this new type of node should be automatically handled here: core/packages/compiler-core/src/codegen.ts Lines 869 to 873 in 0c8dd94
core/packages/compiler-core/src/codegen.ts Lines 670 to 672 in 0c8dd94
This is more or less a writeup for myself in case I have time to come back and create a PR |
What problem does this feature solve?
Native inputs support v-model modifiers
lazy, number and trim
.However, most of the time, people use a wrapper around their inputs.
According to the docs you can add modelModifiers to your custom component so thats not the problem.
However, it is impossible to pass all modifiers from the wrapper component down to the unerlying native input.
There is just no working syntax.
What does the proposed API look like?
The text was updated successfully, but these errors were encountered: