I have

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

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

I was expecting to get sth like this

But I kept getting this

Please advise

CodePudding user response：

it seems like you have a typo in your code! all of the 'tile's should be 'item' instead.

like v-list-item instead of v-list-tile.

check the demo below:

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

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

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