Conditional '@click' in v-for loop

Question

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

Anees Hameed · Accepted Answer · 2020-04-29 00:02:51Z

2

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) 
 }
}

answered Apr 29, 2020 at 0:02

Anees Hameed

6,6322 gold badges43 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

Very nice. You could make that expression a little shorter with subItem.clickable && handleByFunction(subItem.location)

Collectives™ on Stack Overflow

Conditional '@click' in v-for loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related