@update:modelValue 禁用字段规则验证答案

【问题标题】：@update:modelValue disables field rule validation@update:modelValue 禁用字段规则验证
【发布时间】：2023-01-19 17:56:37
【问题描述】：

给定以下组件使用 Vuetify v-text-field

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

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

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

<!-- This does not validate -->

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

问题是，当我将侦听器附加到 @update:modelValue 时，字段规则不再起作用（我可以清除该字段，但什么也没有发生）。当我删除 @update:modelValue 时，字段规则工作正常。

Reproduction link

代码有问题还是错误？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

在你的App.vue中使用v-model，像这样-

<MyField v-model.field-value="msg" :field-value="msg" />

【讨论】：