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

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>