Creating Dynamic Add Remove Rows Table With Vuejs

Creating dynamic Add Remove rows table with Vuejs

Contents

In this Post We Will Explain About is Creating dynamic Add Remove rows table with Vuejs With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to dynamically add remove rows in html table using Vuejs Example

In this post we will show you Best way to implement Vuejs add row to table dynamically, hear for Vuejs add new row to table dynamically with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Dynamically Add/Remove rows in HTML table using Vuejs

In this Example,First of all Add or Inluce External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priorty set.After that Include your relavant CSS Class.

add and delete rows dynamically with textboxes using Vuejs

I had to some module develop a vuejs component which had to simple dynamic table enable user write quotes and some information work orders inside our simple module CRM.

It has to have Following functionality: ability to enter Product Information,Product quantity,Product price and Product tax rate number types numbers should be some number formatted very easy way with thousands number and decimals number separators and display the currency symbol each Creating dynamic table with Vue.js table column’s total should be total auto calculated.

Include External Libs

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://openexchangerates.github.io/accounting.js/accounting.min.js
https://rubaxa.github.io/Sortable/Sortable.js
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

index.html


                        
                            
                            
                                No.
                                product Informatio
                                product Qty
                                product Price
                                product Tax
                                product Total
                                
                            
                            
                            
                            
                                
                                    {{ $index +1 }}
                                
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                
                                
                                    
                                    
                                
                                
                                    
                                    
                                
                            
                            
                            

                            
                                TAX
                                {{ total_tax | live_change_currency }}
                                
                            
                            
                                TOTAL
                                {{ total | live_change_currency }}
                                
                            
                            
                                DELIVERY
                                
                                
                            
                            
                                GRANDTOTAL
                                {{ maintotal = total + prod_delivery | live_change_currency }}
                                
                            
                            
                        
                        
                        {{ $data | json }}

index.js
Vue.filter('live_change_currency', {
    // model -> view
    read: function (val) {
        if (val > 0) {
            return accounting.formatMoney(val, "$", 2, ".", ",");
        }
    },
    // view -> model
    write: function (val, oldVal) {
        return accounting.unformat(val, ",");
    }
});

Vue.directive('sortable', {
    twoWay: true,
    deep: true,
    bind: function () {
        var that = this;

        var options = {
            draggable: Object.keys(this.modifiers)[0]
        };

        this.sortable = Sortable.create(this.el, options);
        console.log('sortable bound!')

        this.sortable.option("onUpdate", function (e) {            
            that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
        });

        this.onUpdate = function(value) {            
            that.value = value;
        }
    },
    update: function (value) {        
        this.onUpdate(value);
    }
});

var vm = new Vue({
    el: '#liveApp',
    data: {
        table_lsts: [
            //initial data
            {quantity: 5, information: "Something", inr: 55.20, tax: 10},
            {quantity: 2, information: "Something else", inr: 1255.20, tax: 20},
        ],
        total: 0,
        maintotal: 0,
        total_tax: 0,
        prod_delivery: 40
    },
    computed: {
        total: function () {
            var t = 0;
            $.each(this.table_lsts, function (i, e) {
                t += accounting.unformat(e.total, ",");
            });
            return t;
        },
        total_tax: function () {
            var tt = 0;
            $.each(this.table_lsts, function (i, e) {
                tt += accounting.unformat(e.tax_amount, ",");
            });
            return tt;
        }
    },
    methods: {
        CreateRow: function (index) {
            try {
                this.table_lsts.splice(index + 1, 0, {});
            } catch(e)
            {
                console.log(e);
            }
        },
        deleteRow: function (index) {
            this.table_lsts.splice(index, 1);
        },
        fetchData: function () {
            $.ajax({
                context: this,
                type: "POST",
                data: {
                    table_lsts: this.table_lsts,
                    total: this.total,
                    prod_delivery: this.prod_delivery,
                    total_tax: this.total_tax,
                    maintotal: this.maintotal,
                },
                url: "/api/data"
            });
        }
    }
});


Example
You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack. 
More Details……

Angularjs Example

Example
I hope you have Got What is Dynamically Add/Remove rows in HTML table using Vuejs And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.


 Related posts:

how to add dynamic rows in a table with javascript?
how to add edit and delete rows of a html table with javascript?

Creating dynamic Add Remove rows table with Vuejs