Vuetify Tutorial #10 - Lists

Hey gang, in this Vuetify tutorial we'll take a little look at lists and how to cycle through data and output a list. In our case, we'll be using a list to output links in the navigation drawer.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[whispay]

For those who are wondering, why there is no newline between the created tiles. It is because in newer versions of vuetify, the word "tiles is replaced by "item".
So v-list-item instead of v-list-tile.

Love your videos btw.

[chunyonglim]

Updated icons for 6:30:
mdi-view-dashboard
mdi-folder
mdi-account

[jvdakid]

I must say, there are a LOT of thank you's to be said. 1) Thank you to our wonderful instructor and Net Ninja, for giving us an amazingly clear tutorial on the best library for one of the most popular frameworks for FREE. Also, thank you for building a truly useful app during said tutorial. 2) Thank you to the YouTube community (commenters below). Obviously our instructor made this video a little while back, and Vuetify has since made some small, but breaking, changes. No ones fault there. But HUGE shoutout to those commenters below for publicizing the updates, upvoting the update comments so they're at the top, and for taking the time to contribute to this free tutorial. This is why the internet is undefeated!

[khanbass]

You're seriously the best teacher for all web dev content. Concise, clear, and presented by creating useful projects. I always go to you when I have to pick up a new technology for a freelance project or something at work. Serious props to you. Thanks for the amazing investment to help so many developers, aspiring and otherwise.

[Olejoss]

I really appreciate add-ons / side comments like that one that you can achieve anything in various possible ways. Maybe it's not strictly the topic of the tutorial per se, but it's extremely helpful to remind that kind of thing and bear it in mind. Just looking at this example, if we see something somewhere else being done the other way - at lest me - I'm not going to wonder like "hey Shaun did it in other way, is it a mistake right there or something was not right in the tut". As I said, things like those side comments, among other things, make your tutorials one of a kind and easy to study on.

[elguapo]

many components have been renamed
<v-list-tile> -> <v-list-item> et al (anything -tile is now -item)
<v-list-tile-sub-title> -> <v-list-item-subtitle>
The avatar prop has been removed

[PlayToxia]

Haven't find any course of Vuetify in hours, and glad to found this, I dont know if your course is the only one in Youtube, but I can say without a doubt that it's the best, thank you very much bro.

[Thinhnv]

code from github and update to the worked icon now:
```js
links: [
{ icon: 'mdi-view-dashboard', text: 'Dashboard', route: '/' },
{ icon: 'mdi-folder', text: 'My Projects', route: '/projects' },
{ icon: 'mdi-account', text: 'Team', route: '/team' },
],
```

[DigitalMonsters]

I'm still a newbie with it but i'm falling in love with Vue <3

If your list tile is matching the color of the drawer you can change the active-class as a prop on the v-list-tile.
active-class="secondary"

[osyopans]

If your "route" doesn't work. Try using "link" in the <v-list-item> instead. This is what I have (I'm using PUG though):
v-list(v-for="(link, index) in links" :key="key")
v-list-item(:to="link.route" link)
v-list-item-action
v-icon(class="white--text")
| {{ link.icon }}
v-list-item-content

| {{ link.text }}

[daniilthegunner]

icons 2020 April:
person -> mdi-account
folder -> mdi-folder
dashboard -> mdi-view-dashboard

[michongoma]

Now i can't wait for the next videos!

[Cho]

I like your choice all the time! Thanks!!!!

[ajaysh]

Suggestion Shaun: Having information on v-container, v-layout and v-flex would be a great help so that one can learn how to organize a page layout with components you are discussing. I struggled with it and would be very helpful to users who struggle to design a decent page due to lack of understanding of these issues.

[ilhanderdiyok]

Updated <script>:

export default {
data() {
return {
drawer: false,
links:[
{ icon: 'mdi-view-dashboard', text: 'Dashboard', route: '/' },
{ icon: 'mdi-folder', text: 'My Projects', route: '/projects' },
{ icon: 'mdi-account', text: 'Team', route: '/team' },
],
right: null,
}
}
};

[bilalahmadayobi]

@The Net Ninja Thanks a lot for creating such videos that wonderful.

[md.akib]

<v-list dark> will make all the inner text of v-list-tile white. So you don't need to keep adding class white--text

[yuriioleksovskyi]

If u get the same problem as me router :to="link.router" doesn't work, just use

[salemabdelniby]

if any one having a problem with the route links

<v-list-tile class="mb-4" v-for="(link, index) in links" :key="index">
<v-list-item :to="link.route" link>
<v-list-tile-action>
<v-icon
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title
</v-list-tile-content>
</v-list-item>
</v-list-tile>
i nested the v-list-tile-action and v-list-tile-content within the v-list-item

[kenhilliard]

I've never seen the "router" property used on an item. I've only seen router-link. In your code example you used "router :to="link.route". I understand the "to" key binding. But I couldn't find any docs on using "router" as a property. Can this property be used on any HTML tag so that clicking this tag loads the router-view component?