Subscribe on changes!

Allow to pass an object of modelModifiers to native inputs

avatar
May 11th 2023

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.

<template>
  <!-- not working -->
  <input v-model.modelMofidiers="value" />
</template>

<script setup>
defineProps({
  modelValue: String,
  modelModifiers: Object
})
</script>

There is just no working syntax.

What does the proposed API look like?

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