Winston Winston - 5 days ago 6
Javascript Question

Can I make some condition inside v-on:click?

I have a situation is that i want to change the class of the li tag when i click it, but need under some condition is class active originally. How to make it works? Here is my code:

<li v-for="timeslot in hourly.Slots" class="time-slot"
v-bind:class="{'selected': timeslot.Status=='selected', 'unavailable': timeslot.Status =='unavailable',
'active': timeslot.Status=='available'}" v-on:click="timeslot.Status='selected'">

Answer

This can be done by calling a methods on click, and checking in that method whether timeslot is available or not, like following:

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        hourlySlots: [
          { 'Status' : 'unavailable', name: "john" },
          { 'Status' : 'available' , name: "Danny" }        
        ]
      };
    },
    methods: {
      selectSlot: function(timeslot) {
        if(timeslot.Status =='available'){
            timeslot.Status ='selected'
        } 
      }
    }
})

Working fiddle: http://jsfiddle.net/5dkw58ke/