CODEWITHSUNDEEP
javascriptvue.js
Winston
Winston

Reputation: 331

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'">

Upvotes: 5

Views: 20375

Answers (2)

KABA
KABA

Reputation: 352

I think it can do by using ternary operator.

v-on:click="
  timeslot.Status == 'available' ?
    timeslot.Status = 'selected' :
    ''
"

http://jsfiddle.net/yrejhmp9/1/

or use logical operators.

v-on:click="
  timeslot.Status == 'available' &&
  (timeslot.Status = 'selected')
"

http://jsfiddle.net/mrgt82ke/1/

Upvotes: 5

Saurabh
Saurabh

Reputation: 73589

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/

Upvotes: 6

Related Questions