Recibo el error "Error de referencia no capturado: comp1 no está definido" cuando emito "update: modelValue" desde el componente.
Y NO sucede en dev , solo cuando construyo.
Padre:
<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>Componente:
<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>Solo necesita mover la importación de TestComp al segundo <script></script> y eliminar el primer <script setup></script>
Y su página principal debería ser así:
<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>En el componente secundario, debe usar el atributo de value y el evento @input para imitar la directiva v-model y definir modelValue como accesorio:
<script> import { defineComponent } from "vue"; export default defineComponent({ props:{ modelValue:String } }); </script> <template> <input type="text" :value="modelValue" @input="$emit('update:modelValue', input)" /> </template>