VueJS Update Object in array v-for loop

VueJS Update Object in array v-for loop

In this Post We Will Explain About is VueJS Update Object in array v-for loop With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to how to update json data in an external file using Vuejs

In this post we will show you Best way to implement Vuejs – How to update object in array, hear for How to arrays – Vuejs foreach update object property with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vuejs – Watch array and update object

index.html

This example illustrates simple select to multiple Live services and their total display cost. Since our new web display html services are stored in one type of the an array, we can simple take more advantage of the using vuejs v-for directive to simple loop through all of data the entries and html display them.

<form id="liveApp" v-cloak>
    <h1>Services</h1>
    <ul>
        <li v-for="live_service in all_services" v-on:click="toggleActive(live_service)" v-bind:class="{ 'current': live_service.current}">
            {{live_service.name}} <span>{{live_service.price | currency}}</span>
        </li>
    </ul>
    <div class="sum_total">
        Total: <span>{{sum_total() | currency}}</span>
    </div>
</form>

index.js

If a new HTML DOM element is added to the vuejs array or any of the change to old ones is changed, simple javascript Vue.js will array automatically update all the data and show simple the new data.

Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2);
});

var demo = new Vue({
    el: '#liveApp',
    data: {
        all_services: [
            {
                name: 'Web Development',
                price: 800,
                current:true
            },{
                name: 'Design',
                price: 1500,
                current:false
            },{
                name: 'Integration',
                price: 4758,
                current:false
            },{
                name: 'Training',
                price: 2569,
                current:false
            }
        ]
    },
    methods: {
        toggleActive: function(s){
            s.current = !s.current;
        },
        sum_total: function(){

            var sum_total = 0;

            this.all_services.forEach(function(s){
                if (s.current){
                    sum_total+= s.price;
                }
            });

           return sum_total;
        }
    }
});

CSS style.css

@import url(https://fonts.googleapis.com/css?family=Cookie);

form{
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 1px 1px #eee;
    width: 400px;
    padding: 35px 60px;
    margin: 50px auto;
}

form h1{
    color:#3D3D3D;
    font-size:64px;
    font-family:'Cookie', cursive;
    line-height:1;
    text-shadow:0 3px 0 rgba(0,0,0,0.1);
}

form ul{
    list-style:none;
    color:#3D3D3D;
    font-size:24px;
    text-align: left;
    margin:24px 0 15px;
}

form ul li{
    padding:24px 30px;
    background-color:#eee;
    margin-bottom:8px;
    box-shadow:0 1px 1px rgba(0,0,0,0.1);
    cursor:pointer;
}

form ul li span{
    float:right;
}

form ul li.current{
    background-color:#4D4D4D;
}

div.sum_total{
    border-top:1px solid rgba(255,255,255,0.5);
    padding:15px 30px;
    font-size:24px;
    text-align: left;
    color:#3D3d3D;
}

div.sum_total span{
    float:right;
}

Example

I hope you have Got javascript – Vuejs Update Array Items by a Given Key And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.