0

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!

user3534080
  • 1,201
  • 1
  • 14
  • 21
  • 1
    Whew, so many questions, I don't know where to start, and it would be a mess. Maybe make this one about the `order` prop, and then create another question about updating `v-list` and another one about the variants (rounded, flat)? – Moritz Ringler May 11 '23 at 07:42
  • sure, that seems reasonable, although there is already an answer for the icon bit. What's the best protocol for something like splitting a question into constituent parts? Should I leave a comment at the top of this question with links to the other threads? – user3534080 May 11 '23 at 20:01
  • @MoritzRingler thank you for the suggestion. I have split this into 4 different questions as suggested. (Links at the top; this post is now only about the icon question) – user3534080 May 12 '23 at 00:41

1 Answers1

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

LyuMir
  • 84
  • 3
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 11 '23 at 12:19
  • regardless of what the bot said, that seems clear enough to me. That resolves one of the linting issues - thanks! – user3534080 May 11 '23 at 18:51