0👍
The :modelValue
prop and @update:modelValue
event is an expanded form of v-model
which is missing in your example.
So, use v-model
in your App.vue
, like this-
<MyField v-model.field-value="msg" :field-value="msg" />
Edit—
As per your comments, if you cant use v-model
then you can follow this guide from the documentation, and use it like this-
App.vue-
<template>
<v-app>
<v-main>
<MyField :field-value="msg" @update:fieldValue="doSomething"/>
</v-main>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
import MyField from './MyField.vue'
const msg = ref('Hello World!')
const doSomething = (event) => { console.log(event) }
</script>
MyFiled.vue-
<script setup lang="ts">
const props = defineProps<{
fieldValue: unknown;
}>();
const emit = defineEmits<{
(e: "update:fieldValue", newValue: unknown): void;
}>();
</script>
<template>
<v-text-field
label="label"
:rules="[ v => !!v || 'Field is required' ]"
:model-value="fieldValue"
@input="$emit('update:fieldValue', $event.target.value)"
@blur="$emit('update:fieldValue', $event.target.value)"
></v-text-field>
</template>
- [Vuejs]-Vue router removing query params
- [Vuejs]-Vue getComponentName returns function instead of 'undefined'
Source:stackexchange.com