Dynamically Add or Remove Table Row Using VueJS
In this tutorial we are going to see how to dynamically add or Remove Table row using VueJS. I have done same thing previously using jQuery in the following two tutorials.
- Dynamically Add or Remove Table Row Using jQuery
- Save Multiple Rows of Invoice Data In MySQL Database Using PHP, jQuery and Bootstrap 3
Step 1: Create index.html file and Add VueJS File:
Create new project/directory name dynamic-table-vue in your htdocs/www folder, and create index.html file in it. Then copy and paste following HMTL snippet in your index.html file.
Here I have just included VueJS library in the head of HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamically Add or Remove Table Row Using VueJS</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
</body>
</html>
Step 2: Create VueJS Application By Initializing VueJs:
Next add <div id=”app”> in the <body> of your html file.
<div id="app">
<!-- VueJs app will mounted here-->
</div>
Next go ahead and initialize VueJs application by calling new keyword followed Vue(), then passing parameters as an object.
var app = new Vue({ el: "#app"});
We are mounting the our vuejs application in <div id=”app”>, that’s specified during VueJS application initialization as el property.
Step 2: Write dynamically Add or Remove Table Row Using VueJS Logic:
Next we are going to write logic for dynamically Add or Remove Table Row Using VueJS. Now add invoice_products array as data property.
var app = new Vue({
el: "#app",
data: {
invoice_products: [{
product_no: '',
product_name: '',
product_price: '',
product_qty: '',
line_total: 0
}]
},
});
Next using v-for generate table rows dynamically.
<tr v-for="(invoice_product, k) in invoice_products" :key="k">
<td scope="row" class="trashIconContainer">
<i class="far fa-trash-alt" @click="deleteRow(k, invoice_product)"></i>
</td>
<td>
<input class="form-control" type="text" v-model="invoice_product.product_no" />
</td>
<td>
<input class="form-control" type="text" v-model="invoice_product.product_name" />
</td>
<td>
<input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
/>
</td>
<td>
<input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
/>
</td>
<td>
<input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
</td>
</tr>
Next add a button to insert table row dynamically using VueJS.
<button type='button' class="btn btn-info" @click="addNewRow">
<i class="fas fa-plus-circle"></i>
Add
</button>
On clicking on this button we are calling addNewRow() method, where we are pushing new object in invoice_products array. That interns dynamically insert table row using v-for directive
var app = new Vue({
el: "#app",
data: {
invoice_products: [{
product_no: '',
product_name: '',
product_price: '',
product_qty: '',
line_total: 0
}]
},
methods:{
addNewRow() {
this.invoice_products.push({
product_no: '',
product_name: '',
product_price: '',
product_qty: '',
line_total: 0
});
}
}
});
Here is complete script which does dynamically add table rows as well calculating each row total, subtotal & invoice total.
var app = new Vue({
el: "#app",
data: {
invoice_subtotal: 0,
invoice_total: 0,
invoice_tax: 5,
invoice_products: [{
product_no: '',
product_name: '',
product_price: '',
product_qty: '',
line_total: 0
}]
},
methods: {
saveInvoice() {
console.log(JSON.stringify(this.invoice_products));
},
calculateTotal() {
var subtotal, total;
subtotal = this.invoice_products.reduce(function (sum, product) {
var lineTotal = parseFloat(product.line_total);
if (!isNaN(lineTotal)) {
return sum + lineTotal;
}
}, 0);
this.invoice_subtotal = subtotal.toFixed(2);
total = (subtotal * (this.invoice_tax / 100)) + subtotal;
total = parseFloat(total);
if (!isNaN(total)) {
this.invoice_total = total.toFixed(2);
} else {
this.invoice_total = '0.00'
}
},
calculateLineTotal(invoice_product) {
var total = parseFloat(invoice_product.product_price) * parseFloat(invoice_product.product_qty);
if (!isNaN(total)) {
invoice_product.line_total = total.toFixed(2);
}
this.calculateTotal();
},
deleteRow(index, invoice_product) {
var idx = this.invoice_products.indexOf(invoice_product);
console.log(idx, index);
if (idx > -1) {
this.invoice_products.splice(idx, 1);
}
this.calculateTotal();
},
addNewRow() {
this.invoice_products.push({
product_no: '',
product_name: '',
product_price: '',
product_qty: '',
line_total: 0
});
}
}
});
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
