Dynamically Add or Remove Table Row Using VueJS

Posted by & filed under CSS, HTML5, JAVASCRIPT, Smart Invoice, Smart Invoice3, VueJS, VueJs 2.

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.

  1. Dynamically Add or Remove Table Row Using jQuery
  2. 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] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!