[Vuejs]-A simple Vue.js addition app

by

1👍

✅

Welcome to the vuetiful world of Vue.

If you need the to see the working code, go here

But let me explain you what I actually did

JS

var app = new Vue({
    el: "#app", 
    data: {
        items:[
        {
            id:'item1',
            included:'true',
            amt: 10
        },
        {
            id:'item2',
            included:'true',
            amt: 20
        },
        {
            id:'item3',
            included:'true',
            amt: 30
        }
        ]
    },
    computed:{
        itemTotal(){
            return this.items.reduce(function(sum, item){
                if(item.included){
                    return  item.amt + sum;
                }

                return sum;
            },0)
        }
    }
});

It is very crucial to model your data in a correct way. As your items where having common properties, so it could come in an array. I have include the id and a flag know whether it is included or not.

I also have added a method to compute the total every time item changes.

Template:

<div id="app">    
    <div v-for="item in items"
         :id="item.id"
         :key="item.id">
        <span>{{item.amt}}</span>
        <button @click="item.included = false"> exclude me</button>

    </div>
    <br>
    <div id="total">total: {{ itemTotal }}</div>
    </div>

In template code I have added v-for to render the whole list, and at button click I am just changing the flag (included). Computation of the itemTotal is triggered automatically and smartly by vue. An at last I am rendering the itemTotal in separate div.

I hope this helps.

👤Ankit Kumar Ojha

1👍

if you want to button toggles the ‘included’ state and exclude the value

try it use v-on:click and a unclick boolean varible

simple demo looks like:

var app = new Vue({
    el: "#app", 
    data: {
        item1: {
            amt: 10,
            unclick:true
        },
        item2: {
            amt: 30,
            unclick:true
        }
    }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <div id="item1">{{ item1.amt }} 
        <button v-on:click="item1.unclick = !item1.unclick" type="button">
         {{ (item1.unclick?'exclude me':'include me')  }}
        </button>  
    </div>
    <div id="item2">{{ item2.amt }} 
        <button v-on:click="item2.unclick = !item2.unclick" type="button">
         {{ (item2.unclick?'exclude me':'include me')  }}
        </button>  
    </div>
    <br>
    <div id="total">total: {{ 
            (item1.unclick?item1.amt:0) 
            + (item2.unclick?item2.amt:0)
        }}
    </div>
</div>
👤Wei Lin

Leave a comment