vue3+ts表单数据回填

在Vue 3中使用TypeScript进行表单数据回填，你可以按照以下步骤操作：

1. 定义表单数据的类型：首先，创建一个接口或类型来定义表单数据的结构。例如：

interface FormData {
  name: string;
  email: string;
  // 其他字段...
}

2. 在组件中定义表单数据变量：在Vue组件中，使用`ref`或`reactive`来定义表单数据变量，并将其初始化为空对象或按照类型定义进行初始化。例如：

import { ref } from 'vue';

export default {
  setup() {
    const formData = ref<FormData>({
      name: '',
      email: '',
    });

    // 其他逻辑...

    return {
      formData,
      // 其他返回值...
    }
  }
}

3. 绑定表单输入字段：将表单输入字段与表单数据变量进行双向绑定，以实现数据回填。例如：

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="formData.name">

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="formData.email">

    <!-- 其他表单字段... -->

    <button type="submit">Submit</button>
  </form>
</template>

4. 数据回填：如果有需要在组件加载时回填表单数据的需求，可以在组件的`mounted`或`onMounted`生命周期钩子中进行数据回填。例如：

import { onMounted } from 'vue';

export default {
  setup() {
    const formData = ref<FormData>({
      name: '',
      email: '',
    });

    onMounted(() => {
      // 从API或其他地方获取表单数据，并赋值给formData
      formData.value.name = 'John Doe';
      formData.value.email = 'john@example.com';
    });

    return {
      formData,
    }
  }
}

这样，当组件加载时，表单的输入字段将自动填充为预先设定的值。

希望以上步骤对你有帮助！如果还有其他问题，请随时提问。