I'd like to prepend an icon to a v-list-item if it is active. I can't figure out how to do this.
<v-list border density="compact">
<v-list-item v-for="(item,i) in items">
<!-- put an icon here but only if it is active? -->
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
Can anyone guide me on how to do this in Vuetify 3?
CodePudding user response:
You can use <template>
tags with the slots Vuetify gives. In this case v-list-item
has the prepend
slot, and one of its properties is the isActive
. You can see more here: https://next.vuetifyjs.com/en/api/v-list-item/#props-prepend
Basicaly your code would look like this:
<v-list border density="compact">
<v-list-item v-for="(item,i) in items" :value="item">
<!-- Start Slot -->
<template v-slot:prepend="{ isActive }">
<v-icon v-if="isActive" :icon="item.icon"></v-icon>
</template>
<!-- End Slot -->
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>