如何动态加载vue-form-generator表单架构？异步加载实现方案咨询

我帮你搞定这个异步更新表单字段标签的需求啦，核心是要让schema保持响应式，这样vue-form-generator就能自动感知到变化并更新视图。下面是完整的可运行代码示例：

完整组件代码 #

<template>
  <div class="panel-body">
    <vue-form-generator
      :schema="schema"
      :model="model"
      :options="formOptions"
    ></vue-form-generator>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import VueFormGenerator from 'vue-form-generator';
import 'vue-form-generator/dist/vfg.css';

// 初始化响应式的表单schema
const schema = ref({
  fields: [
    {
      type: 'input',
      inputType: 'text',
      label: 'Name-TEST-failed', // 初始标签
      model: 'name',
      placeholder: 'Enter your name',
      validator: VueFormGenerator.validators.string
    }
  ]
});

// 表单绑定的模型数据
const model = ref({
  name: ''
});

// 表单配置选项
const formOptions = ref({
  validateAfterLoad: true,
  validateAfterChanged: true
});

// 模拟异步请求的函数
async function fetchUpdatedLabel() {
  // 这里替换成你的真实REST请求，比如axios.get('/api/label')
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Name-TEST-success');
    }, 2000); // 模拟2秒的请求延迟
  });
}

// 组件挂载后执行异步更新
onMounted(async () => {
  try {
    const newLabel = await fetchUpdatedLabel();
    // 修改schema里对应字段的标签，因为schema是响应式的，视图会自动更新
    schema.value.fields[0].label = newLabel;
  } catch (error) {
    console.error('获取标签失败:', error);
  }
});
</script>

关键要点说明 #

• 保持Schema的响应式：我用了Vue3的ref来包裹schema对象，这样当我们修改schema.value里的属性时，Vue会自动触发视图更新。如果是Vue2的话，直接把schema放在data()里就行，Vue2会自动处理响应式。
• 异步修改时机：在onMounted钩子（Vue2里是mounted）里发起异步请求，确保组件已经挂载，vue-form-generator已经渲染了初始表单。
• 直接修改Schema字段：请求成功后，直接更新schema数组里对应字段的label属性，vue-form-generator会自动检测到这个变化并更新表单的显示。

如果你的异步逻辑不是在组件挂载时触发，而是需要通过按钮点击等事件触发，只要把异步更新的代码放到对应的方法里就行，原理是一样的。

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