nodum vuejs sample progress-bar

json-sample.twig

{{ [
    { id: 1, name: "Wietse", donkerblauw: 10, blauw:  20 },
    { id: 2, name: "Thomas", groen:       20, oranje: 40 },
    { id: 3, name: "Pepper", oranje:      90, groen:   5 },
    { id: 4, name: "Henk",   blauw:       40, oranje: 20 }
]|json_encode }}

sample.js

  // Dit is Vue greatness

$vueobj = new Vue({
    el : "#vueobj",
    data : {
        donkerblauw : 100,
        blauw       : 0,
        groen       : 0,
        oranje      : 0,
        
        pct_donkerblauw : 0,
        pct_blauw       : 0,
        pct_groen       : 0,
        pct_oranje      : 0,
        
        persons     : [],
        person      : null
    },
    methods : {
        clearAll : function(){
            this.donkerblauw = 0
            this.blauw       = 0
            this.groen       = 0
            this.oranje      = 0
        },
        setValues : function(obj){
            for(k in obj){
                this[k] = obj[k]
            }
        },
        valuesToPct : function(){
            var total = parseInt(this.donkerblauw) + parseInt(this.blauw) + parseInt(this.groen) + parseInt(this.oranje)
            this.pct_donkerblauw  = parseInt(this.donkerblauw) / total*100
            this.pct_blauw        = parseInt(this.blauw)       / total*100
            this.pct_groen        = parseInt(this.groen)       / total*100
            this.pct_oranje       = parseInt(this.oranje)      / total*100
        }
    },
    ready: function(){
        // Hier een ajaxcall doen voor dingen die je initieel wilt hebben, als dat het geval is
        this.valuesToPct()
    },
    watch : {
        donkerblauw   : function(){ this.valuesToPct() },
        blauw         : function(){ this.valuesToPct() },
        groen         : function(){ this.valuesToPct() },
        oranje        : function(){ this.valuesToPct() },
        person : function(newValue,oldValue){
            this.clearAll()
            
            var pickedObject = this.persons[newValue]
            if(typeof pickedObject['donkerblauw'] !== 'undefined') this.donkerblauw   = pickedObject.donkerblauw
            if(typeof pickedObject['blauw']       !== 'undefined') this.blauw         = pickedObject.blauw
            if(typeof pickedObject['groen']       !== 'undefined') this.groen         = pickedObject.groen
            if(typeof pickedObject['oranje']      !== 'undefined') this.oranje        = pickedObject.oranje
        }
    }
})

// jQuery shit, en dat kunnen we gewoon mengen met Vue omdat je Vue global hebben gemaakt

$("#doshizzle").click(function(){
    $vueobj.setValues({ donkerblauw : 10, oranje : 20 })
})

$("#getshizzle").click(function(){
    $.post($("base").attr('href') + 'json/sample', {}, function(response){
        $vueobj.persons = response
    }, 'json');
});

sample.twig

<script>
    var $vueobj;
</script>

<h1>Dit is met Vue</h1>

<div id="vueobj">
    <div class="progress">
        <div class="progress-bar progress-bar-donkerblauw" style="width: ${ pct_donkerblauw }%">
            <span class="sr-only">${ pct_donkerblauw }% Complete (success)</span>
        </div>
        <div class="progress-bar progress-bar-blauw" style="width: ${ pct_blauw }%">
            <span class="sr-only">${ pct_blauw }% Complete (warning)</span>
        </div>
        <div class="progress-bar progress-bar-groen" style="width: ${ pct_groen }%">
            <span class="sr-only">${ pct_groen }% Complete (danger)</span>
        </div>
        <div class="progress-bar progress-bar-oranje" style="width:${ pct_oranje }%">
            <span class="sr-only">${ pct_oranje }% Complete (danger)</span>
        </div>
    </div>
    
    <input v-model="donkerblauw" v-int type="number" />
    <input v-model="blauw"       v-int type="number" />
    <input v-model="groen"       v-int type="number" />
    <input v-model="oranje"      v-int type="number" />
    
    <br />
    <br />
    
    <div v-if="persons.length > 0">
        <b>Kies een persoon</b><br />
        <select v-model="person" class="form-control">
            <option v-for="(k,p) in persons" value="${ k }">${ p.name }</option>
        </select>
        <br />
        Je hebt de volgende persoon (id) gekozen:
        <b>${ person }</b>
    </div>
    
    <br />

</div>

<h3>Dit is buiten Vue, via jQuery</h3>
<button id="doshizzle">oranje=20,donkerblauw=10</button>
<button id="getshizzle">Shit ophalen uit Extern Systeem</button>