CODEWITHSUNDEEP
vuejs2vuetify.js
user1729972
user1729972

Reputation: 886

Conditional '@click' in v-for loop

In creating a menu using a list within a v-navigation-drawer, I will loop through a set of items and sub-items with 3 properties amongst others: title (string), location (v-router destination) and clickable (boolean). I'm working off the code here and would like some items to be actual links and others simply open up further menu options and not be clickable.

Code portion is:

 <v-list-item
    v-for="subItem in item.items"
    :key="subItem.title"
    @click=""
  >
     <v-list-item-content>
            <v-list-item-title v-text="subItem.title"></v-list-item-title>
     </v-list-item-content>
 </v-list-item>

My question: how do I get the 

 @click="subItem.location"

only on 

 v-if:subItem.clickable

Upvotes: 1

Views: 338

Answers (1)

Anees Hameed
Anees Hameed

Reputation: 6544

You can add conditions onto the click handler as below.

<v-list-item
    v-for="subItem in item.items"
    :key="subItem.title"
    @click="subItem.clickable ? handleByFunction(subItem.location):null"
  >
     <v-list-item-content>
            <v-list-item-title v-text="subItem.title"></v-list-item-title>
     </v-list-item-content>
 </v-list-item>

methods{
  handleByFunction(v){
    console.log(v) 
 }
}

Upvotes: 2

Related Questions