[Vuejs]-@update:modelValue disables field rule validation

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>

Working demo

Leave a comment