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: