问题

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.

这篇文章已经重新编辑，只涉及到 v-list-item-icon；如果您是为了寻找相关信息而来，下面有答案。

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:

有人在评论中建议，因为我提出了许多迁移问题，所以将其拆分为多个帖子。我现在已经这样做了。这些是那些帖子：

• Regarding replacing app/clipped-left/offset-y
• Regarding replacing v-list-item-content/v-list-item-group
• Regarding replacing .v-application / rounded / flat

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.

不过，有人已经帮助我解决了 v-list-item-icon 的问题，所以我正在重新编辑这篇文章，以便其他人找到时只涉及这个问题。

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.

我不是前端开发者，但我被要求更新一些非常旧的依赖项，其中一部分是从 Vuetify 2 迁移到 Vuetify 3。我已尽力遵循迁移指南，但在 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}}}}"?

...是否需要 icon="{{v-if={{item.icon}}}}"？

Thank you!

谢谢！

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

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

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

答案1

得分: 1

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

你真的不需要使用 'item.icon || null'，只使用 'item.icon' 就足够了。

参考这个回答：
https://stackoverflow.com/questions/42874314/vuejs-conditionally-add-an-attribute-for-an-element/64598898#64598898

<details>
<summary>英文:</summary>

<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: 
https://stackoverflow.com/questions/42874314/vuejs-conditionally-add-an-attribute-for-an-element/64598898#64598898

</details>