如何在<script>中访问VeeValidate Field组件的field属性？

首先要明确：field.values是VeeValidate内部维护的表单状态对象，直接修改它不会触发响应式更新，反而可能被内部逻辑覆盖，所以得用VeeValidate提供的官方API来更新表单值。

推荐两种可行方案：

方案一：通过useForm钩子更新表单值 #

利用VeeValidate的useForm钩子获取表单实例，调用setValue方法来更新对应字段的值，适合动态追加父组件传递的新值：

<script setup>
import { Field, useForm, getValue } from 'vee-validate';
const props = defineProps(['name', 'veeValue', 'parentValue']);
const { setValue } = useForm();

// 监听父组件值的变化，动态追加到目标字段
watch(() => props.parentValue, (newVal) => {
  if (newVal) {
    // 获取当前字段的已有值
    const currentVal = getValue(props.name);
    // 追加新值（如果是数组类型）
    setValue(props.name, Array.isArray(currentVal) ? [...currentVal, newVal] : newVal);
    // 如果是要给field.values新增一个独立字段，比如字段名为extra，直接用：
    // setValue('extra', newVal);
  }
}, { immediate: true });
</script>

<template>
  <Field v-slot="{ field, handleChange }" :name="name" :value="veeValue">
    <input v-bind="field" @input="handleChange" />
  </Field>
</template>

方案二：通过计算属性合并初始值与父组件值 #

如果父组件传递的值是需要和初始值合并后作为Field的初始值，可使用计算属性提前处理：

<script setup>
import { Field } from 'vee-validate';
const props = defineProps(['name', 'initialVeeValue', 'parentValue']);

// 合并初始值与父组件传递的值
const veeValue = computed(() => {
  // 根据实际数据类型调整合并逻辑，这里以数组为例
  if (!props.parentValue) return props.initialVeeValue;
  return Array.isArray(props.initialVeeValue) 
    ? [...props.initialVeeValue, props.parentValue] 
    : { ...props.initialVeeValue, ...props.parentValue };
});
</script>

<template>
  <Field v-slot="{ field, handleChange }" :name="name" :value="veeValue">
    <input v-bind="field" @input="handleChange" />
  </Field>
</template>

为什么你之前的方案不可行？ #

1. 方案1中<script>无法直接获取slot作用域里的field属性，因为field是模板层面的作用域变量，仅在Field的slot内部可用；
2. 方案2中直接修改field.values属于操作VeeValidate内部状态，不会触发框架的响应式更新，提交时可能还是旧值。

内容的提问来源于stack exchange，提问作者Léonard Krief