I catch error "Uncaught ReferenceError: comp1 is not defined" when make emit "update:modelValue" from component.
And it NOT happens in dev, only when I build.
Parent:
<script setup>
import TestComp from "/src/components/TestComp.vue";
</script>
<script>
export default {
data() {
return {
comp1: null // If remove this row - error will stop, but watcher don`t work ofcourse
};
},
components: {
TestComp
},
watch: {
comp1(n, o) { console.log(o, n) },
}
};
</script>
<template>
<TestComp
v-model="comp1"
class="form-control"
/>
</template>
Component:
<script>
import { defineComponent } from "vue";
export default defineComponent({
data() {
return { input: '' }
}
});
</script>
<template>
<input
type="text"
v-model="input"
@change="$emit('update:modelValue', input)"
/>
</template>
You just need to move the TestComp import to the second <script></script>, and remove the first <script setup></script>
And your Parent page should be like this:
<script>
import TestComp from '/src/components/TestComp.vue'
export default {
data() {
return {
comp1: null, // If remove this row - error will stop, but watcher don`t work ofcourse
}
},
components: {
TestComp,
},
watch: {
comp1(n, o) {
console.log(o, n)
},
},
}
</script>
<template>
<TestComp v-model="comp1" class="form-control" />
</template>
In child component you should use value attribute and @input event to mimic the v-model directive, and define modelValue as prop:
<script>
import { defineComponent } from "vue";
export default defineComponent({
props:{
modelValue:String
}
});
</script>
<template>
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', input)"
/>
</template>