CODEWITHSUNDEEP
vue.jsvuetify.jsvuejs3
David H
David H

Reputation: 1605

Vuetify 3 v-list -- prepend icon if v-list-item is active

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 class="px-15 pt-5" 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?

Upvotes: 3

Views: 7546

Answers (1)

m4el
m4el

Reputation: 531

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 class="px-15 pt-5" 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>

Upvotes: 3

Related Questions