In my component I define a model:
const model = defineModel({
type: Number,
});
I want the model value to be based upon an inputs value, so I have an input:
const input = ref(null);
This is bound to a text input with v-model:
<input v-model="input" />
Then I set the model to be based upon the input (this is a basic example of manipulation that I need to do):
model.value = computed(() => Number(input.value));
But I am having issues with the model updating in the parent component in development (works in build).
{{ someNumber }} //does not update
<MyComponent v-model="someNumber" />
This is very strange as it works when I run a build but not in dev, can anyone shed any light on this?
3
If you want to get a modified value, instead of assigning the value
from a computed property, you can add the @input event listener:
<script setup>
import {ref} from 'vue';
const model = defineModel({
type: Number,
});
const input = ref(null);
function updateHandler(e) {
// you can do any conversion here
model.value = e.target.value * 10;
}
</script>
<template>
<input type="number" v-model="input" @input="updateHandler" />
</template>
playground
You cannot reset 1 prop to 1 ref in core props is 1 reactivity if you try to fix it it will overwrite computed written in defineModel and will not work. you can only emit it by 1 follower
watchEffect(() => {
model.value = Number(input.value)
})