Vuetify：v-navigation-drawer

Question

我有

<v-navigation-drawer v-model="drawer" app class="blue darken-5">
    <v-list>
        <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-tile-action>
                <v-icon class="white--text">{{ link.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
                <v-list-tile-title class="white--text"> {{ link.text }} </v-list-tile-title>
            </v-list-tile-content>
        </v-list-tile>
    </v-list>
</v-navigation-drawer>

我期待得到这样的东西

但我一直得到这个

请指教

Answer 1

您的代码中似乎有错字！所有的 'tile's 都应该是 'item'。

喜欢v-list-item 而不是v-list-tile。

查看下面的演示：

Vue.config.productionTip = false;
Vue.config.devtools = false

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      drawer: true,
      links: [{
          text: 'home',
          icon: 'mdi-home'
        },
        {
          text: 'watch',
          icon: 'mdi-eye'
        },
        {
          text: 'user',
          icon: 'mdi-account'
        },
      ]
    };
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-navigation-drawer v-model="drawer" app class="blue darken-5">
      <v-list>
        <v-list-item v-for="link in links" :key="link.text">
          <v-list-item-action>
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-item-action>

          <v-list-item-content>
            <v-list-item-title class="white--text"> {{ link.text }} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</div>