Implementing Dynamic Add/Remove Form Items with Vue.js

In web development, managing a variable number of form fields is a common challenge; Vue.js offers a straightforward solution by leveraging reactive data and directives.

Understanding the requirement – the goal is to create a form that can dynamically add or remove items, each containing fields such as name and email, and submit the collected data to a backend.

Creating the Vue component – define a forms array in the component’s data, use v-for to render each form item, and bind inputs with v-model . The following template and script illustrate the full component:

<code>&lt;template&gt;
  &lt;div&gt;
    &lt;form v-for="(form, index) in forms" :key="index"&gt;
      &lt;input type="text" v-model="forms[index].name"&gt;
      &lt;input type="text" v-model="forms[index].email"&gt;
    &lt;/form&gt;
    &lt;button @click="addForm"&gt;新增表单&lt;/button&gt;
    &lt;button @click="submitForms"&gt;提交&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      forms: [] // 存储表单数据对象的数组
    }
  },
  methods: {
    addForm() {
      this.forms.push({ name: '', email: '' }) // 添加一个空白的表单数据对象
    },
    removeForm(index) {
      this.forms.splice(index, 1) // 移除指定位置的表单数据
    },
    submitForms() {
      // 处理表单数据，可以通过打印输出或发送请求等方式来展示或处理这些数据
      console.log(this.forms)
    }
  }
}
&lt;/script&gt;</code>

Adding items dynamically – the addForm method pushes an empty object into the forms array, causing Vue to render a new set of inputs automatically.

<code>methods: {
  addForm() {
    this.forms.push({ name: '', email: '' }) // 添加一个空白的表单数据对象
  },
}</code>

Removing items dynamically – each rendered form includes a “Delete” button that calls removeForm(index) , which splices the corresponding entry from the forms array.

<code>&lt;form v-for="(form, index) in forms" :key="index"&gt;
  <!-- 表单项内容 -->
  &lt;button @click="removeForm(index)"&gt;删除&lt;/button&gt;
&lt;/form&gt;</code>

<code>methods: {
  removeForm(index) {
    this.forms.splice(index, 1) // 移除指定位置的表单数据
  },
}</code>

Submitting the data – the submitForms method demonstrates a simple way to handle the collected data, e.g., by logging it or sending it to an API.

<code>methods: {
  submitForms() {
    // 处理表单数据，可以通过打印输出或发送请求等方式来展示或处理这些数据
    console.log(this.forms)
  }
}</code>

Conclusion – By following these steps, developers can build flexible, user‑friendly forms suitable for surveys, registrations, and other scenarios, improving both user experience and development efficiency.