Creating dynamic Add Remove rows table with Vuejs

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.

  Laravel 6 Clear cache Example

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

<div class="panel-body" id="liveApp">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>No.</th>
                                <th>product Informatio</th>
                                <th>product Qty</th>
                                <th>product Price</th>
                                <th>product Tax</th>
                                <th>product Total</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody v-sortable.tr="table_lsts">
                            <tr v-for="lst in table_lsts" track-by="$index">
                                <td>
                                    {{ $index +1 }}
                                </td>
                                <td>
                                    <input class="form-control" v-model="lst.information"/>
                                </td>
                                <td>
                                    <input class="form-control" v-model="lst.quantity" number/>
                                </td>
                                <td>
                                    <input class="form-control text-right" v-model="lst.inr | live_change_currency" number data-type="currency"/>
                                </td>
                                <td>
                                    <select class="form-control" v-model="lst.tax">
                                        <option value="0">0%</option>
                                        <option value="10">10%</option>
                                        <option value="20">20%</option>
                                    </select>
                                </td>
                                <td>
                                    <input class="form-control text-right" :value="lst.quantity * lst.inr | live_change_currency" v-model="lst.total | live_change_currency" number readonly />
                                    <input type="hidden" :value="lst.quantity * lst.inr * lst.tax / 100" v-model="lst.tax_amount | live_change_currency" number/>
                                </td>
                                <td>
                                    <button class="btn btn-primary btn-xs" @click="CreateRow($index)">add lst</button>
                                    <button class="btn btn-danger btn-xs" @click="deleteRow($index)">Delete Row</button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>

                            <tr>
                                <td colspan="5" class="text-right">TAX</td>
                                <td colspan="1" class="text-right">{{ total_tax | live_change_currency }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-right">TOTAL</td>
                                <td colspan="1" class="text-right">{{ total | live_change_currency }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-right">DELIVERY</td>
                                <td colspan="1" class="text-right"><input class="form-control text-right" v-model="prod_delivery | live_change_currency" number/></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-right"><strong>GRANDTOTAL</strong></td>
                                <td colspan="1" class="text-right"><strong>{{ maintotal = total + prod_delivery | live_change_currency }}</strong></td>
                                <td></td>
                            </tr>
                            </tfoot>
                        </table>
                        <button @click="fetchData()">SUBMIT DATA</button>
                        <pre>{{ $data | json }}</pre>
                    </div>

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

  Angular 9/8 Material Textarea Examples

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.