Creating dynamic Add Remove rows table with Vuejs

Creating dynamic Add Remove rows table with Vuejs

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 }}
                                
                                

                                    
                                
                                

                                    
                                
                                

                                    
                                
                                

                                    
                                        0%
                                        10%
                                        20%
                                    
                                
                                

                                    
                                    
                                
                                

                                    add lst
                                    Delete Row
                                
                            
                            
                            


                            

                                
TAX
                                
{{ total_tax | live_change_currency }}
                                

                            
                            

                                
TOTAL
                                
{{ total | live_change_currency }}
                                

                            
                            

                                
DELIVERY
                                

                                

                            
                            

                                
GRANDTOTAL
                                
{{ maintotal = total + prod_delivery | live_change_currency }}
                                

                            
                            
                        
                        SUBMIT DATA
                        
{{ $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?