Working on a Nuxt3 project, I have implemented v-model on a component. Following the guidance from Vue documentation, here is how it should be done:
In the parent component:
<MyInput v-model="myData" placeholder="My placeholder" />
Within the child component:
<template>
<div class="my-input">
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</div>
</template>
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<script>
export default {
props: {
placeholder: {
type: String
},
},
mounted() {
console.log(this.placeholder)
}
}
</script>
It's mentioned in the Vue docs that the <script setup> and the <script> tags can coexist within the same file. However, this has been causing errors for me. As long as the <script setup> tag is present, the console log shows undefined. Removing the <script setup> tag results in the console log displaying My placeholder. Could there be an issue with this configuration in Nuxt? Any suggestions or insights?