Winston Winston - 1 year ago 86
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 Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download