VUE 3 Component Uncaught ReferenceError on update:modelValue

user_2409949 0
Viewed 507

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>
vue.js javascript
2 Answers

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>
user_52909110

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>
user_81728570
Related