为何vee-validate的setValues首次提交未更新值？如何修复？

使用vee-validate的setValues方法更新表单值时，首次提交打印的还是旧的初始值，第二次提交才会显示更新后的新值。

代码示例 #

<template>
  <form @submit="onSubmit">
    <input name="email" v-model="email" />
    <!-- <span>{{ errors.email }}</span> -->
    <input name="password" v-model="password" type="password" />
    <!-- <span>{{ errors.password }}</span> -->
    <button type="submit">submit</button>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';
import { computed, reactive, ref, inject, onMounted  } from 'vue';


const { errors, setErrors, setFieldValue, handleSubmit  } = useForm({
  initialValues: {
    email: 'example@gmail.com',
    password: 'p@$$w0rd',
  }
});

const onSubmit = handleSubmit(async (values, actions) => {
  actions.setValues({
    email: '12134123',
    password: '1122200',
  });
  console.log(values);
});
</script>

原因分析 #

• handleSubmit回调中的values参数是提交瞬间的表单值快照，它在回调执行前就已确定，不会因为后续调用actions.setValues而改变。
• 首次提交时，你先修改了表单状态，但打印的是之前生成的旧快照；第二次提交时，表单状态已被更新，快照值自然变为新值。

修复方案 #

根据需求选择对应方式：

1. 需要查看更新后的最新值：直接调用actions.getValues()获取当前表单的最新状态，或者直接打印你要设置的新值对象。
2. 需要后续提交使用新值：setValues已经成功更新了表单状态，无需额外操作，下次提交时values参数会自动取到新值。

修改后的代码示例 #

<template>
  <form @submit="onSubmit">
    <input name="email" v-model="email" />
    <input name="password" v-model="password" type="password" />
    <button type="submit">submit</button>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';

const { errors, setErrors, setFieldValue, handleSubmit } = useForm({
  initialValues: {
    email: 'example@gmail.com',
    password: 'p@$$w0rd',
  }
});

const onSubmit = handleSubmit(async (values, actions) => {
  const newFormValues = {
    email: '12134123',
    password: '1122200',
  };
  actions.setValues(newFormValues);
  
  // 方式一：直接打印要设置的新值
  console.log(newFormValues);
  // 方式二：调用getValues获取最新表单状态
  console.log(actions.getValues());
});
</script>

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