Vee Validate 4提交表单后错误提示无法消失问题求助

你的问题核心是自定义Tiptap组件没有正确和vee-validate的表单校验机制联动，导致表单提交时校验逻辑无法识别组件内的输入内容，触发必填错误。以下是具体问题点和修复方案：

一、代码中的明显错误 #

1. Form实例引用错误：你在onSubmit里写了if (!Form.diry)，这里的Form是导入的组件构造函数，不是当前表单的实例，且存在拼写错误（dirty写成diry）。应该从useForm解构出form实例来使用。
2. 手动修改errors不规范：不要直接赋值errors.message = ''，vee-validate的errors是响应式状态，应使用官方提供的方法重置字段或表单。

二、核心问题：自定义组件与vee-validate的联动缺失 #

vee-validate默认只能跟踪标准表单元素的状态，自定义组件需要通过以下方式之一让校验系统感知输入变化：

方案1：用Field组件包裹自定义组件（推荐） #

这是vee-validate官方推荐的自定义组件集成方式，通过Field的v-slot传递字段状态和事件，让校验系统自动跟踪输入：

修改后的模板代码：

<template>
  <Form @submit="onSubmit">
    <!-- 用Field包裹自定义组件，传递字段状态 -->
    <Field name="message" v-slot="{ field }">
      <AppCommentBox 
        v-bind="field" 
        :taskmembers="members" 
        placeholder="Type @ to mention and notify a member." 
      />
    </Field>
    <span class="text-red-500 text-sm normal-case">{{ errors.message }}</span>
    <div class="flex gap-2 mt-4">
      <ElementsAppButton size="small" type="submit">
        Save
      </ElementsAppButton>
    </div>
  </Form>
</template>

修改后的脚本代码：

<script setup>
import { useField, Form, useForm } from 'vee-validate'
import * as yup from 'yup'
import { useBaseFetch } from '@/composables/api'
import AppCommentBox from '@/components/elements/AppCommentBox'

const props = defineProps({
  taskId: {
    type: Number,
    required: true,
  },
  taskMembers: {
    type: Array,
    required: true,
  },
  user: {
    type: Object,
    required: true,
  },
})

// 解构出form实例，替换原来的错误引用
const { errors, handleSubmit, form, resetField } = useForm({
  validationSchema: yup.object({
    message: yup.string().required('This field is required.'),
  }),
})

const errorMsg = ref('')
const currentPage = ref(1)
const members = ref(props.taskMembers)

const onSubmit = handleSubmit(async () => {
  try {
    await postComment()
    // 提交成功后重置字段状态
    resetField('message')
    currentPage.value = 1
    getComments() // 确保这个函数已定义
  } catch (err) {
    // 处理错误
    if (err.response?.status === 422) {
      console.log('validation error', err)
    } else {
      errorMsg.value = 'An error occurred.'
    }
  }
})

const postComment = async () => {
  const task = props.taskId
  const url = `/tasks/${task}/comments`
  // 从form实例中获取字段值，确保是最新的
  const commentContent = form.value.message

  await useBaseFetch(url, {
    method: 'POST',
    body: JSON.stringify({
      comment: commentContent,
    }),
  })
}
</script>

方案2：手动同步自定义组件的输入状态（若坚持用v-model） #

如果不想用Field组件，需要确保自定义组件正确触发update:modelValue事件，并且手动通知vee-validate字段变化：

1. 确保AppCommentBox内部在Tiptap内容变化时，正确emit事件：

// AppCommentBox内部示例
const emit = defineEmits(['update:modelValue'])

// 当Tiptap内容变化时
editor.value.on('update', () => {
  emit('update:modelValue', editor.value.getHTML()) // 或纯文本，根据你的需求
})

2. 在父组件中，使用useField的setValue方法手动同步：

<script setup>
// ... 其他代码
const { value: message, setValue, resetField } = useField('message')

// 监听message变化，同步到vee-validate字段
watch(message, (newVal) => {
  setValue(newVal)
})

// 提交成功后重置字段
const onSubmit = handleSubmit(async () => {
  try {
    await postComment()
    resetField('message')
    currentPage.value = 1
    getComments()
  } catch (err) {
    // 错误处理
  }
})
</script>

三、额外注意事项 #

• 确保AppCommentBox的v-model绑定的是纯文本或HTML字符串，和yup校验的string类型匹配，不要传递Tiptap实例或其他非字符串类型。
• 提交表单时，优先从form.value中获取字段值，确保拿到的是vee-validate跟踪的最新状态，而不是直接用message.value。

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