Vue3中使用Vee-Validate v4验证动态表单字段报错解决

问题根源 #

你遇到的错误是因为直接修改了Vue的props（props是只读属性），不能直接对props.ingredients进行赋值或修改操作，必须通过组件内部的响应式状态来维护动态字段。

方案一：手动维护本地响应式状态 #

1. 转换props为内部状态 #

在组件的setup函数中，将父组件传递的ingredients props转换为组件内部的响应式数组：

<script setup>
import { ref } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';

const props = defineProps({
  ingredients: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['update:ingredients']);

// 本地维护响应式配料数组，避免直接修改props
const localIngredients = ref([...props.ingredients]);
</script>

2. 实现添加配料方法 #

修改addIngredient方法，操作本地的localIngredients，而不是props：

const addIngredient = () => {
  // 添加空的配料对象，包含需要验证的字段
  localIngredients.value.push({
    name: '',
    amount: '',
  });
  // 同步更新父组件状态（如果需要）
  emit('update:ingredients', localIngredients.value);
};

3. 模板中绑定动态表单字段 #

在模板里，循环localIngredients，为每个配料生成对应的Field组件，字段名使用动态路径：

<template>
  <Form @submit="handleSubmit">
    <div v-for="(ingredient, index) in localIngredients" :key="index">
      <Field
        :name="`ingredients[${index}].name`"
        rules="required|min_length:2"
        placeholder="配料名称"
      />
      <ErrorMessage :name="`ingredients[${index}].name`" />

      <Field
        :name="`ingredients[${index}].amount`"
        rules="required|numeric"
        placeholder="用量"
      />
      <ErrorMessage :name="`ingredients[${index}].amount`" />

      <button type="button" @click="removeIngredient(index)">删除</button>
    </div>

    <button type="button" @click="addIngredient">添加配料</button>
    <button type="submit">提交</button>
  </Form>
</template>

4. 删除配料方法（可选） #

const removeIngredient = (index) => {
  localIngredients.value.splice(index, 1);
  emit('update:ingredients', localIngredients.value);
};

方案二：使用Vee-Validate官方useFieldArray（推荐） #

Vee-Validate v4提供了useFieldArray组合式API，专门用于处理动态表单字段数组，能自动管理字段状态和验证规则，无需手动拼接字段名：

1. 组件代码示例 #

<script setup>
import { Form, Field, ErrorMessage, useFieldArray } from 'vee-validate';

const props = defineProps({
  initialIngredients: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['update:initialIngredients']);

const { fields, push, remove } = useFieldArray({
  name: 'ingredients', // 字段数组的根名称
  initialValue: props.initialIngredients, // 初始值从props获取
});

// 添加配料
const addIngredient = () => {
  push({ name: '', amount: '' });
  // 同步到父组件
  emit('update:initialIngredients', fields.value);
};

// 提交表单
const handleSubmit = (values) => {
  // values.ingredients 就是验证后的配料数组
  console.log('提交的数据:', values);
};
</script>

<template>
  <Form @submit="handleSubmit">
    <div v-for="(field, index) in fields" :key="field.id">
      <Field
        :name="`ingredients[${index}].name`"
        rules="required|min_length:2"
        placeholder="配料名称"
      />
      <ErrorMessage :name="`ingredients[${index}].name`" />

      <Field
        :name="`ingredients[${index}].amount`"
        rules="required|numeric"
        placeholder="用量"
      />
      <ErrorMessage :name="`ingredients[${index}].amount`" />

      <button type="button" @click="remove(index)">删除</button>
    </div>

    <button type="button" @click="addIngredient">添加配料</button>
    <button type="submit">提交</button>
  </Form>
</template>

说明 #

• useFieldArray会自动管理字段数组的状态，包括添加、删除时的验证状态更新
• 父组件通过v-model:initialIngredients绑定初始值，组件内部通过emit同步更新后的数组

关键注意事项 #

• 永远不要直接修改props，必须通过内部响应式状态中转
• 如果使用useFieldArray，确保字段名的路径和useFieldArray的name参数一致
• 验证规则可以直接写在Field的rules属性，也可以使用defineRule全局定义规则

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