Add Or Remove Rows Dynamically In Vue.js

In this blog we will learn how to add or remove rows dynamically in vue.js.

Step 1: Create a new project:

• vue create add-row-demo

Step 2: Open App.vue file and add the following in it:

<template>
  <section class="m-5">
    <button class="btn btn-primary" style="width: 5%;" @click="addRow()">Add</button>
    <table class="w-50 border mt-3">
      <thead>
        <tr>
          <td class="tdBorderEmail"><label>Action</label></td>
          <td class="tdBorderEmail"><label>First Name</label></td>
          <td class="tdBorderEmail"><label>Last Name</label></td>
          <td class="tdBorderEmail"><label>Email</label></td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="dynamic in dynamicArray" :key="dynamic">
          <td>
            <button class="btn btn-danger" @click="deleteRow(i)">Delete</button>
          </td>
          <td>
            <input style="width:120px" v-model="dynamic.firstName" type="text" />
          </td>
          <td>
            <input style="width:120px" v-model="dynamic.lastName" type="text" />
          </td>
          <td>
            <input style="width:250px" v-model="dynamic.emailAddress" type="email" />
          </td>
        </tr>
      </tbody>
    </table>
    <div class="container mt-5 w-50 m-0">
      <h2 class="text-center">Data Entry</h2>
      <table class="table table-striped mt-3">
        <thead>
          <tr>
            <th>firstName</th>
            <th>lastName</th>
            <th>emailAddress</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="value in dynamicArray" :key="value">
            <td>{{ value.firstName }}</td>
            <td>{{ value.lastName }}</td>
            <td>{{ value.emailAddress }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</template>
  

<script>
export default {
  name: 'App',
  data() {
    return {
      dynamicArray: [],
      newarr: [],
      newDynamic: ''
    }
  },
  methods: {
    addRow() {
      this.dynamicArray.push({ firstName: '', lastName: '', emailAddress: '' })
    },
    deleteRow(index) {
      this.dynamicArray.splice(index, 1);
    }
  }

}

</script>

Code in Action: