CODEWITHSUNDEEP
vue.jsvuejs3vuetify.jsvuetifyjs3
user3534080
user3534080

Reputation: 1455

Vuetify 2->3 Migration: what to do when v-list-item-icon has a v-if conditional

I have reworked this post to just be about v-list-item-icon; if you are arriving here looking for that, there is an answer down below.

It was suggested in a comment that since I was asking a number of migration questions, I split this into multiple posts. I have done so now. These are those posts:

Someone already helped me with the v-list-item-icon issue, though, so I am reworking the rest of this post to just be about that in case someone else finds this.

The migration guide says a number of properties has been removed, but the docs are incredibly vague on what to do to replace them.

I am not a front-end dev, but I've been tasked with updating some very old dependencies, and part of that is migrating from Vuetify 2 to Vuetify 3. I've done my best to follow the migration guide, but I'm having trouble with v-list-item-icon.

While it seems clear I need to replace

<v-list-item
  class="mr"
  v-for="item in userItems"
  :key="item.title"
  link
  @click="clickUserMenuItem(item.routeName)"
>
  <v-list-item-icon>
    <v-icon>{{ item.icon }}</v-icon>
  </v-list-item-icon>

with

<v-list-item
  class="mr"
  v-for="item in userItems"
  :key="item.title"
  link
  @click="clickUserMenuItem(item.routeName)"
  icon="{{item.icon}}"
>

it is not clear what to do if I have

<v-list-item-icon v-if="item.icon">
  <v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>

... do I need icon="{{v-if={{item.icon}}}}"?

Thank you!

Upvotes: 0

Views: 1188

Answers (1)

LyuMir
LyuMir

Reputation: 100

<v-list-item
  class="mr"
  v-for="item in userItems"
  :key="item.title"
  link
  @click="clickUserMenuItem(item.routeName)"
  :icon="item.icon || null"
/>

you really do not need it with 'item.icon || null' < 'item.icon' would be enough..

see this answer: VueJS conditionally add an attribute for an element

Upvotes: 1

Related Questions