当前位置：首页 > VUE

vue动态实现表单

2026-02-19 11:46:30VUE

Vue 动态实现表单的方法

使用 `v-for` 动态渲染表单字段

通过 v-for 遍历数据数组动态生成表单字段，结合 v-model 实现双向绑定。适用于字段数量或结构可能变化的场景。

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

<script>
export default {
  data() {
    return {
      formFields: [
        { id: 'name', label: '姓名', type: 'text', model: 'name' },
        { id: 'email', label: '邮箱', type: 'email', model: 'email' }
      ],
      formData: {
        name: '',
        email: ''
      }
    };
  }
};
</script>

动态表单验证

结合 Vue 的响应式特性和验证库（如 VeeValidate）实现动态表单验证。适用于需要实时校验的场景。

<template>
  <form @submit.prevent="submitForm">
    <div v-for="(field, index) in dynamicFields" :key="index">
      <input
        :type="field.type"
        v-model="field.value"
        @blur="validateField(field)"
      />
      <span v-if="field.error">{{ field.error }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      dynamicFields: [
        { type: 'text', value: '', error: '', rule: 'required' },
        { type: 'email', value: '', error: '', rule: 'email' }
      ]
    };
  },
  methods: {
    validateField(field) {
      if (field.rule === 'required' && !field.value) {
        field.error = '该字段不能为空';
      } else if (field.rule === 'email' && !/^\S+@\S+\.\S+$/.test(field.value)) {
        field.error = '请输入有效的邮箱地址';
      } else {
        field.error = '';
      }
    },
    submitForm() {
      let isValid = true;
      this.dynamicFields.forEach(field => {
        this.validateField(field);
        if (field.error) isValid = false;
      });
      if (isValid) {
        console.log('表单提交成功');
      }
    }
  }
};
</script>

动态添加/删除表单字段

通过操作数组实现表单字段的动态增减，适用于需要用户自定义字段数量的场景。

<template>
  <form>
    <div v-for="(field, index) in dynamicForm" :key="index">
      <input v-model="field.value" placeholder="输入内容" />
      <button @click="removeField(index)">删除</button>
    </div>
    <button @click="addField">添加字段</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      dynamicForm: [{ value: '' }]
    };
  },
  methods: {
    addField() {
      this.dynamicForm.push({ value: '' });
    },
    removeField(index) {
      this.dynamicForm.splice(index, 1);
    }
  }
};
</script>

动态表单与后端交互

将动态表单数据通过 API 提交到后端，适用于需要保存或处理动态表单数据的场景。

<template>
  <form @submit.prevent="submitForm">
    <div v-for="(item, index) in formItems" :key="index">
      <input v-model="item.value" />
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formItems: [{ value: '' }]
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('/api/form', {
          data: this.formItems
        });
        console.log('提交成功', response.data);
      } catch (error) {
        console.error('提交失败', error);
      }
    }
  }
};
</script>

动态表单的进阶用法

结合 Vuex 或 Pinia 管理动态表单的状态，适用于大型应用中需要共享表单数据的场景。

<template>
  <form>
    <div v-for="(field, index) in fields" :key="index">
      <input v-model="field.value" />
    </div>
  </form>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['fields'])
  },
  methods: {
    ...mapMutations(['updateField'])
  }
};
</script>