template syntax sugar for dynamic modelModifiers.

[renatodeleao]

In wrapper components, modelModifiers might need to be applied conditionally based on some prop or else.
The v-model syntax doesn't allow that directly in the template. The alternative is to use the modelModifiers prop directly, but we could "sweeten" template syntax the same way it was done with v-model.modifierNamefor static modifiers in the first place.

<app-input v-model.modifierName="value" /> 
// is also "sugar" for 
<app-input :modelModifiers="{ modifierName: true }" v-model="value" />

<script setup>
import { ref } from 'vue'
const props = defineProps({ something: Boolean })
const someConditionalModififer =  computed(() => props.something ? 'fooModifier' : 'barModifier')
const modelModififers = computed(() => ({ [someConditionalModifier.value]: true }))

const value = ref('')
</script>

<template>
   <!-- not possible -->
   <app-input v-model.[someConditionalModifier]="value "/>
   
   <!-- alternatives -->
  <app-input :modelModifiers="{ [someConditionalModifier]: true }" v-model="value" />
  <app-input :modelModifiers="modelModififers" v-model="value" />
</template>

Proposal

 <!-- Make this possible (or something similar) -->
 <app-input v-model.[someConditionalModifier]="value " />

Whatever is passed into someConditionalModifier needs to be checked, for string or object

1. if object pass as is to modelModifiers
2. optional support string values and create the { [string]: true } object internally
3. anything else would throw a compiler error/warning, even if we could support Arrays as well, there's no need to go overboard with implementation.
4. support v-model:my-prop.[modifier] which would be transformed into a myPropModifiers

Additional info

• Playground Link
• Other references: Provide a way to pass modelModifiers to a native input #1825 (comment)

Cheers! ✌️