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

您的代碼中似乎有錯字。 所有的“瓷磚”都應該是“項目”。

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