使用Vue3新特性构建动态表单的方法详解

import { ref } from 'vue';

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

    return { formData };
  },
};

<template>
  <form>
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="formData.name" />
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="formData.email" />
    </div>
    <div>
      <label for="message">留言：</label>
      <textarea id="message" v-model="formData.message"></textarea>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

import { ref, computed, onMounted, onUnmounted } from 'vue';

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

    const isValid = computed(() => {
      // 验证表单数据
      return formData.value.name && formData.value.email && formData.value.message;
    });

    const handleSubmit = () => {
      if (isValid.value) {
        // 提交表单数据
        console.log('提交表单数据：', formData.value);
      } else {
        // 显示错误信息
        alert('请填写完整信息');
      }
    };

    onMounted(() => {
      // 在组件挂载时添加事件监听
      document.addEventListener('submit', handleSubmit);
    });

    onUnmounted(() => {
      // 在组件卸载时移除事件监听
      document.removeEventListener('submit', handleSubmit);
    });

    return { formData, isValid };
  },
};

<template>
  <form>
    <div v-for="(field, index) in formFields" :key="index">
      <label :for="field.name">{{ field.label }}:</label>
      <input :type="field.type" :id="field.name" v-model="formData[field.name]" />
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const formData = ref({});
    const formFields = ref([
      { name: 'name', label: '姓名', type: 'text' },
      { name: 'email', label: '邮箱', type: 'email' },
      { name: 'message', label: '留言', type: 'textarea' },
    ]);

    // ... 其他逻辑

    return { formData, formFields };
  },
};
</script>