In the docs for vue’s v-model
modifiers, they give this example and there is a playground link as well.
<script setup>
const [model, modifiers] = defineModel({
set(value) {
if (modifiers.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
return value
}
})
</script>
<template>
<input type="text" v-model="model" />
</template>
This code can be edited so that the modifiers
variable is now foo
. What kind of pattern is this and how is this achievable (with pseudocode) since the value of const [model, foo] = ...
is in a different scope than foo.capitalize
?
<script setup>
const [model, foo] = defineModel({
// ^^^
set(value) {
if (foo.capitalize) {
// ^^^
return value.charAt(0).toUpperCase() + value.slice(1)
}
return value
}
})
</script>
<template>
<input type="text" v-model="model" />
</template>