ildar-k
11/26/2019 - 7:11 PM

Dynamic classes

h2 Example 1
                //- nii nagu saab siduda vue's html teisi atribiuute, saab siduda ka klassi atribuute. Küll on üks erinevus. Klassi sidumisel vue'ga on klass objekt, millel on nimi ja väärtus. Antud juhul kui väärtus on true, saab element klassi, kui see on false, siis element ei saa klassi
                //- Antud juhul on on meil klass available, mida tahan anda nupule ja selle väärtus on muutuja available, mille omakorda väärtus on kas true või false
                //- klikile reageerides muutub väärtus ka true v falseks ja sellele vastavalt kas klass lisandub või võetakse ära.
                div.button(@click="available = !available" v-bind:class="{ available: available }") Ivan

                hr

                h2 Example 2
                button(@click="nearby= !nearby") Toggle Nearby
                button(@click="available = !available") Toggle Available
                div.driverStatus(v-bind:class="compClasses") Jaanus
new Vue({
  el: "#vue_app",

  data: {
   available: false,
   nearby: false
    
  },
  computed:{
      compClasses:function(){
          return {
              available: this.available,
              nearby: this.nearby
          }
      }
  }
  
});