听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！...

点击上方 蓝字 关注我们

大家好，我是CodeQi！ 

最近，我的老板给我布置了一个任务：实现一个用户可以随时增删字段的动态表单。

你知道的，作为一个前端开发者，我平时和表单关系可不算好，这次的任务无疑是向我发起了挑战。于是，我带上了 Vue 3 这个利器，开始了我的动态表单征程。

接下来，我会带着大家一起从入门到精通，深入了解如何在 Vue 3 中实现动态表单。

介绍

动态表单是一种允许用户根据需求动态调整表单字段的表单。利用 Vue 3 的响应式特性和组件系统，我们可以轻松实现这一需求。

本文将带你从基础概念开始，一步步实现一个支持动态添加、删除和验证的表单，并介绍一些高级技巧。

基础概念

在实现动态表单之前，我们需要理解以下基础概念：

• • Vue 3 响应式系统：Vue 3 使用 Proxy 实现响应式系统，使得数据变化可以自动更新视图。

• • 组件：Vue 组件是构建 Vue 应用的基本单元，通过组件化可以提高代码的复用性和可维护性。

• • 表单绑定：通过 v-model 指令可以轻松地实现表单输入与数据的双向绑定。

实现步骤

项目初始化

首先，我们需要初始化一个 Vue 3 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create dynamic-form
cd dynamic-form

选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：

npm run serve

创建基础表单组件

接下来，我们创建一个基础表单组件。首先，在 src/components 目录下创建一个 BaseForm.vue 文件，并添加以下内容：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <input
          v-model="field.value"
          :type="field.type"
          :id="`field-${index}`"
          class="form-control"
        />
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { label: '姓名', type: 'text', value: '' },
        { label: '邮箱', type: 'email', value: '' },
      ],
    };
  },
  methods: {
    addField() {
      this.fields.push({ label: '新字段', type: 'text', value: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      console.log('表单数据:', this.fields);
    },
  },
};
</script>

<style>
.form-group {
  margin-bottom: 1rem;
}
</style>

动态添加表单字段

在上述基础表单组件中，我们已经实现了添加字段的功能。通过点击“添加字段”按钮，我们可以在表单中动态添加新的字段。

<button type="button" @click="addField">添加字段</button>

对应的方法如下：

methods: {
  addField() {
    this.fields.push({ label: '新字段', type: 'text', value: '' });
  },
}

动态删除表单字段

同样地，我们还可以实现动态删除表单字段的功能。每个字段旁边都有一个“删除”按钮，点击后即可删除该字段。

<button type="button" @click="removeField(index)">删除</button>

对应的方法如下：

methods: {
  removeField(index) {
    this.fields.splice(index, 1);
  },
}

表单验证

为了提高表单的可靠性，我们需要在提交表单时进行验证。下面是一个简单的验证示例，确保每个字段都已填写。

methods: {
  handleSubmit() {
    const isValid = this.fields.every(field => field.value.trim() !== '');
    if (!isValid) {
      alert('所有字段均为必填项');
      return;
    }
    console.log('表单数据:', this.fields);
  },
}

高级技巧

在基础实现的基础上，我们还可以通过一些高级技巧来增强表单的功能。

使用动态组件

在某些情况下，我们可能需要根据字段类型动态渲染不同的表单控件。可以使用 Vue 的 component 组件来实现这一点。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <component
          :is="getComponent(field.type)"
          v-model="field.value"
          :id="`field-${index}`"
          class="form-control"
        ></component>
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { label: '姓名', type: 'text', value: '' },
        { label: '邮箱', type: 'email', value: '' },
        { label: '描述', type: 'textarea', value: '' },
      ],
    };
  },
  methods: {
    addField() {
      this.fields.push({ label: '新字段', type: 'text', value: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      const isValid = this.fields.every(field => field.value.trim() !== '');
      if (!isValid) {
        alert('所有字段均为必填项');
        return;
      }
      console.log('表单数据:', this.fields);
    },
    getComponent(type) {
      const components = {
        text: 'input',
        email: 'input',
        textarea: 'textarea',
      };
      return components[type] || 'input';
    },
  },
};
</script>

<style>
.form-group {
  margin-bottom: 1rem;
}
</style>

表单数据持久化

为了防止页面刷新导致表单数据丢失，我们可以将表单数据持久化到本地存储中。

created() {
  const savedFields = localStorage.getItem('fields');
  if (savedFields) {
    this.fields = JSON.parse(savedFields);
  }
},
methods: {
  addField() {
    this.fields.push({ label: '新字段', type: 'text', value: '' });
    this.saveFields();
  },
  removeField(index) {
    this.fields.splice(index, 1);
    this.saveFields();
  },
  handleSubmit() {
    const isValid = this.fields.every(field => field.value.trim() !== '');
    if (!isValid) {
      alert('所有字段均为必填项');
      return;
    }
    console.log('表单数据:', this.fields);
    this.saveFields();
  },
  saveFields() {
    localStorage.setItem('fields', JSON.stringify(this.fields));
  },
}

结合 Vuex 管理状态

在大型应用中，推荐使用 Vuex 来管理状态。可以将表单状态存储在 Vuex 中，以便在整个应用中共享和管理。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    fields: [
      { label: '姓名', type: 'text', value: '' },
      { label: '邮箱', type: 'email', value: '' },
   

 ],
  },
  mutations: {
    addField(state, field) {
      state.fields.push(field);
    },
    removeField(state, index) {
      state.fields.splice(index, 1);
    },
    updateFieldValue(state, { index, value }) {
      state.fields[index].value = value;
    },
  },
});

// BaseForm.vue
<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <input
          v-model="field.value"
          :type="field.type"
          :id="`field-${index}`"
          class="form-control"
        />
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['fields']),
  },
  methods: {
    ...mapMutations(['addField', 'removeField', 'updateFieldValue']),
    handleSubmit() {
      const isValid = this.fields.every(field => field.value.trim() !== '');
      if (!isValid) {
        alert('所有字段均为必填项');
        return;
      }
      console.log('表单数据:', this.fields);
    },
  },
};
</script>

<style>
.form-group {
  margin-bottom: 1rem;
}
</style>

总结

通过本文的介绍，我们从基础到高级详细讲解了如何在 Vue 3 中实现动态表单。

我们学习了如何创建和管理动态表单字段，如何进行表单验证，以及如何使用动态组件、持久化数据和结合 Vuex 来增强表单的功能。

希望通过本文的介绍，您能掌握在 Vue 3 中实现动态表单的技巧，并在实际项目中应用这些知识。

祝你编码愉快！Happy coding!