vue动态表单

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index">
        <label :for="field.id">{{ field.label }}</label>
        <input
          :id="field.id"
          v-model="field.value"
          :type="field.type"
          :placeholder="field.placeholder"
        />
        <button type="button" @click="removeField(index)">Remove</button>
      </div>
      <button type="button" @click="addField">Add Field</button>
      <button type="submit">Submit</button>
    </form>
    <pre>{{ formData }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        {
          id: 'field-0',
          label: 'Field 1',
          type: 'text',
          placeholder: 'Enter something...',
          value: ''
        }
      ]
    };
  },
  computed: {
    formData() {
      return this.fields.reduce((acc, field) => {
        acc[field.id] = field.value;
        return acc;
      }, {});
    }
  },
  methods: {
    addField() {
      const newFieldId = `field-${this.fields.length}`;
      this.fields.push({
        id: newFieldId,
        label: `Field ${this.fields.length + 1}`,
        type: 'text',
        placeholder: 'Enter something...',
        value: ''
      });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      alert(JSON.stringify(this.formData, null, 2));
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了 v-for 指令来循环渲染表单字段。
   • 每个字段都有一个唯一的 id，并通过 v-model 绑定其值。
   • 提供了添加和移除字段的按钮。
   • 表单提交时调用 handleSubmit 方法。

2. 脚本部分 (<script>):

   • data 中定义了初始的字段数组 fields。
   • computed 属性 formData 将所有字段的值收集到一个对象中。
   • methods 包含了三个方法：
     • addField: 添加一个新的字段。
     • removeField: 移除指定索引的字段。
     • handleSubmit: 提交表单时显示当前表单数据。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式。