[Vue + FormKit] 如何向Schema生成的表单加载异步数据？

可以通过以下两种方法实现异步数据加载到FormKitSchema生成的表单中：

方法1：利用响应式上下文自动同步 #

核心思路是先初始化响应式数据对象，避免在组件初始化阶段用await阻塞渲染，待异步数据获取完成后更新响应式对象，FormKitSchema会自动感知上下文变化并同步表单值。

修改后的代码：

<template>
  <FormKitSchema :schema="schema" :data="asyncData"/>
</template>

<script setup>
import { reactive, onMounted } from 'vue';

const getData = async () => {
  return new Promise((resolve) => {    
    setTimeout(() => {
      resolve({ name: "How do I get this into the form???" })
    }, 1500)
  })
};

// 先初始化空的响应式对象，避免await阻塞组件初始化
const asyncData = reactive({
  userData: {},
  submit: async (formData, node) => {
    console.log("submit: ", { formData, node });
  }
})

// 组件挂载后获取异步数据并更新响应式对象
onMounted(async () => {
  asyncData.userData = await getData();
})

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'form',
      id: 'form',
      onSubmit: '$submit',
      plugins: '$plugins',
      actions: false,
    },
    children: [
      {
        $formkit: 'text',
        name: 'fullname',
        label: '*Full Name',
        placeholder: 'Full Name',
        value: "$userData.name",
        validation: 'required'
      },
      {
        $formkit: 'submit',
        label: 'Save',
        disabled: '$get(form).state.valid !== true'
      }
    ]
  }
]
</script>

关键说明 #

• 不要在reactive初始化时直接使用await，这会导致组件初始化流程阻塞，表单无法渲染。
• Vue的响应式系统会自动跟踪asyncData.userData的变化，FormKitSchema的上下文会同步更新，从而自动填充表单值。

方法2：通过FormKit节点API手动设置值 #

如果需要更精准地控制单个字段的值，可以通过FormKit节点的setValueAPI直接赋值，适合复杂场景下的字段控制。

修改后的代码：

<template>
  <FormKitSchema ref="formRef" :schema="schema" :data="asyncData"/>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';

// 定义表单节点的ref
const formRef = ref(null);

const getData = async () => {
  return new Promise((resolve) => {    
    setTimeout(() => {
      resolve({ name: "How do I get this into the form???" })
    }, 1500)
  })
};

const asyncData = reactive({
  submit: async (formData, node) => {
    console.log("submit: ", { formData, node });
  }
})

onMounted(async () => {
  const userData = await getData();
  // 确保表单节点已挂载后，手动设置字段值
  if (formRef.value) {
    formRef.value.setValue('fullname', userData.name);
  }
})

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'form',
      id: 'form',
      onSubmit: '$submit',
      plugins: '$plugins',
      actions: false,
    },
    children: [
      {
        $formkit: 'text',
        name: 'fullname',
        label: '*Full Name',
        placeholder: 'Full Name',
        validation: 'required'
      },
      {
        $formkit: 'submit',
        label: 'Save',
        disabled: '$get(form).state.valid !== true'
      }
    ]
  }
]
</script>

关键说明 #

• 通过ref获取FormKit表单节点，在异步数据返回后调用setValue方法，直接指定字段名和对应的值。
• 这种方式无需依赖上下文绑定，适合需要动态修改单个字段的场景。

内容的提问来源于stack exchange，提问作者A-Diddy