如何在 vee-validate onMounted 事件中设置初始值

Question

我在 Vue 3 项目中使用 vee-validate，需要在组件安装时动态设置初始值。但是，onMounted生命周期钩子中更新的值似乎没有在表单中生效。

这是一个最小的例子：

<template>
  <Form v-slot="{ meta }" :initial-values="initialValues">
    <Field name="email" />
    <button :disabled="!meta.dirty">Submit</button>
  </Form>
</template>

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

const initialValues = ref({ email: 'mm' });

onMounted(() => {
  console.log('mounted');
  initialValues.value.email = '[email protected]'; // Trying to update the initial value
});
</script>

我希望电子邮件字段在 onMounted 挂钩运行后显示 [email protected]，但它显示的是原始值“mm”。

在我的实际用例中，该值来自 API 调用，因此我无法静态设置它。

如何确保表单在组件安装后获得更新的初始值？

有什么建议

Answer 1

这些值被称为初始值是有原因的，初始化后设置它们应该没有效果。

这种情况需要将 初始值设置为未定义，然后在可用时设置

Form

值。

或者在父级中使用

Suspense

并使组件异步：

const data = await ...;
const initialValues = ref({ email: data });