I have a parent child component setup to test v-model. The child updates parent when you enter a value but not initially.
parent:
<script setup>
import { ref } from 'vue';
import TextInput from './TextInput.vue';
const size = ref(1);
const color = ref('red');
</script>
<template>
<TextInput v-model:size="size" v-model:color.capitalize="color" />
<div :style="{ fontSize: size + 'em', color: color }">
<!-- Question 1: this line shows "red" but "Red" is what I want initially -->
<p>{{ size }} {{ color }}</p>
</div>
</template>
child: TextInput.vue
<script setup>
import { ref } from 'vue';
const size = defineModel('size');
const [color, modifier] = defineModel('color', {
set(value) {
if(modifier.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
return value;
},
//only this forces color to upper case on start in the input
get(value) {
if(modifier.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
return value;
}
});
</script>
<template>
<input v-model="size">
<input v-model="color">
</template>
Question 2:
If I omit “color” in defineModel(“color”, {…, I get the following error
[Vue warn]: Extraneous non-props attributes (color, colorModifiers) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <TextInput size=1 onUpdate:size=fn color="red" ... >
at <ComponentVModel>
at <App>
If I keep just the
<input v-model="color">
line, to make it not a fragment, it doesn’t update at all.