vue2动态添加表单

### Vue2 中实现动态添加表单的方法

在 Vue2 应用程序中，通过组件化的方式可以轻松实现动态添加表单功能。当用户点击“Add”按钮时，应用程序能够识别用户的意图并加载相应的 `Form` 组件[^1]。

#### 创建基础结构

为了支持动态字段的创建，首先定义一个父级容器来管理所有的子表单项：

<template>
  <div class="dynamic-form">
    <!-- 遍历 fields 数组渲染多个 FieldComponent -->
    <FieldComponent v-for="(field, index) in fields" :key="index" />
    
    <!-- 添加新条目的按钮 -->
    <button @click="addField">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储当前已有的字段配置对象数组
      fields: []
    };
  },
  
  methods: {
    addField() {
      const newFieldConfig = { /* 定义新的字段配置 */ };
      
      this.fields.push(newFieldConfig);
    }
  }
};
</script>

此模板中的 `fields` 数据属性用于保存每一个被加入到页面上的输入框或其他类型的控件设置；每当调用 `addField()` 函数就会往这个列表里追加一个新的项。

#### 设计可重用的字段组件

为了让代码更加模块化和易于维护，在上面的例子基础上还需要构建一个名为 `FieldComponent.vue` 的独立文件作为单独使用的表单位置部件:

<!-- FieldComponent.vue -->
<template>
  <div class="form-field">
    <!-- 基于传入 props 渲染不同种类的 HTML 输入元素 -->
    {{ label }}
    <input type="text"/>
  </div>
</template>

<script>
export default {
  name: "FieldComponent",
  props: ["label"]
}
</script>

在这个简单的例子中，`FieldComponent` 接收了一个叫做 `label` 的参数用来显示标签文字，并且默认展示的是文本型 `<input>` 控制器。实际项目可以根据需求调整成其他形式比如下拉菜单、日期选择器等等。