绑定@update:modelValue后Vuetify v-text-field验证规则失效问题

组件代码示例 #

<script setup lang="ts">
const props = defineProps<{
  fieldValue: unknown;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", newValue: unknown): void;
}>();
</script>

<!-- 此写法验证正常 -->
<!--
<template>
      <v-text-field
        label="label"
        :rules="[ v => !!v || 'Field is required' ]"
        :model-value="fieldValue"
      />
</template>
-->

<!-- 此写法验证失效 -->
<template>
      <v-text-field
        label="label"
        :rules="[ v => !!v || 'Field is required' ]"
        :model-value="fieldValue"
        @update:modelValue="emit('update:modelValue', $event)"
      />
</template>

问题现象 #

给v-text-field绑定@update:modelValue监听后，字段的必填验证规则不再生效——清除字段内容时没有任何错误提示；移除该监听后，验证规则恢复正常工作。

原因分析 #

这不是Vuetify的Bug，是代码写法不符合组件设计逻辑导致的：

• Vuetify表单组件的验证机制依赖于内部对modelValue状态变化的自动跟踪，v-model语法糖是官方推荐的双向绑定方式，内部已处理好验证触发逻辑。
• 手动拆分:model-value和@update:modelValue时，组件无法感知到值更新后需要触发验证，因此验证规则不会执行。

解决方案 #

方案1：使用v-model语法糖（推荐） #

遵循Vue双向绑定约定，用v-model替代手动拆分绑定，既能保证验证逻辑正常，代码也更简洁：

<script setup lang="ts">
// props名称改为modelValue，符合v-model约定
const props = defineProps<{
  modelValue: unknown;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", newValue: unknown): void;
}>();
</script>

<template>
  <v-text-field
    label="label"
    :rules="[ v => !!v || 'Field is required' ]"
    v-model="modelValue"
  />
</template>

方案2：手动触发验证（特殊场景使用） #

如果必须手动绑定事件（比如需在更新前做额外逻辑处理），可通过组件ref手动触发验证：

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  fieldValue: unknown;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", newValue: unknown): void;
}>();

const textFieldRef = ref<InstanceType<typeof import('vuetify/lib/components/VTextField/VTextField.vue')['default']> | null>(null);

const handleUpdate = (newValue: unknown) => {
  emit('update:modelValue', newValue);
  // 值更新后手动触发验证
  textFieldRef.value?.validate();
};
</script>

<template>
  <v-text-field
    ref="textFieldRef"
    label="label"
    :rules="[ v => !!v || 'Field is required' ]"
    :model-value="fieldValue"
    @update:modelValue="handleUpdate"
  />
</template>

内容的提问来源于stack exchange，提问作者baitendbidz