javascript - 导航菜单图标关闭位置 - Vue/Vuetify

Question

我已经重新建模了我的菜单栏，但是我遇到了这个“错误”，其中图标似乎偏离了它们应该在的位置。有什么想法可以解决这个问题吗？另外，如何增加图标之间的间距？欢迎任何改进代码的提示。谢谢你。

参考图片：图标错误

Vue/Vuetify 代码：

<template>
    <v-toolbar color="#009688" flat>
        <v-toolbar-title class="title">Test Page</v-toolbar-title>
        <v-divider></v-divider>

    <v-tooltip
            bottom
            v-for="item in items"
            :key="item.title"
            >
        <template v-slot:activator="{ on, attrs }">
        <v-btn icon>
            <router-link :to="{ path:item.path }" style="text-decoration: none; color: inherit;">
            <v-list-item-icon>
                <v-icon
                dark
                v-bind="attrs"
                v-on="on"
                large
                md3 >
                {{ item.icon }}
                </v-icon>
            </v-list-item-icon>
            </router-link>
        </v-btn>
        </template>
        <span>{{item.title}}</span>
    </v-tooltip>

    </v-toolbar>
</template>
>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      menu: true,
      items: [
        { title: 'Home', icon: 'mdi-home', path: '/' },
        { title: 'Login', icon: 'mdi-account', path: '/login' },
        { title: 'Register', icon: 'mdi-pencil', path: '/register' },
        { title: 'Logout', icon: 'mdi-logout', path: '/' }
      ],
      color: 'primary'
    }
  }
}
</script>

标签： javascripthtmlvue.jsmenuvuetify.js

Answer 1

只需删除 v-list-item-icon，此组件仅在您使用 v-list-item 时有用。

      <router-link
        :to="{ path: item.path }"
        style="text-decoration: none; color: inherit"
      >
        <v-icon dark v-bind="attrs" v-on="on" large md3>
          {{ item.icon }}
        </v-icon>
      </router-link>