Условное '@click' в цикле v-for

Question

При создании меню с использованием списка в v-навигационном ящике я проведу oop через набор элементов и подпунктов с тремя свойствами среди прочих: заголовок (строка), местоположение (назначение v-маршрутизатора) ) и кликабельный (логический). Я работаю над кодом здесь и хотел бы, чтобы некоторые элементы были реальными ссылками, а другие просто открывали дополнительные пункты меню и не были активными.

Часть кода:

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

Мой вопрос: как мне получить

 @click="subItem.location" 

только на

 v-if:subItem.clickable

Answer 1

Вы можете добавить условия в обработчик кликов, как показано ниже.

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