1.2 Lists, attributes and directives - VVJS/intro GitHub Wiki

If you are joining us at this step, or have messed something up, just checkout to the tag for this section:

git checkout 1.2 --force

Lists

We can see that the items property in our data object is an array. In the HTML markup, we are looping over this array in the v-list-tile element with the v-for directive. The syntax is pretty simple:

v-for="(item, i) in items"

The index, i here isn't necessary in our case, since we don't need to access the index of the item being listed. We could also write:

v-for="item in items"

This will loop over all of the items in our data method in the side nav. There are two problems: We only have one item in the array at the moment, and it doesn't link to anything. Let's change the list up a bit. Let's update the items property so that it includes a url:

items: [
    {
        icon: 'list',
        title: 'List',
        url: '/'
    }
],

And we can attach our url to the nav by adding a :to binding to the repeating nav element like this:

<v-list-tile :to="item.url" v-for="(item, i) in items" :key="i">

And it should now be a clickable link. Note that this is an attribute from Vuetify, not from Vue itself. Typically you would add a :href attribute to an a tag to add in a link. You might notice there is also a :key attribute. It is highly recommended that we add a key binding for performance reasons. You can find the documentation on lists and loops here.

Attributes

The moustaches cannot be used inside html attributes, so instead we have to use the v-bind directive. v-bind is simply a way to pass dynamic data into an attribute. The syntax is either v-bind:name or :name for short. This is how we have bound the key directive to the index on our v-list-title element.

:key="i"

You can learn more about attributes here.

Directives

Directives are special attributes that begin with 'v-', such as v-for or v-model. Another one would be v-if which is a conditional. On our v-toolbar-side-icon element we can see another directive, that looks like this @click.stop="drawer = !drawer":

<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>

'@' is a shortcut for the v-on directive, which is an event handler - so instead of v-on:click= you can just type @click=. The .stop after the @click simply tells the event to stop propagation. So, You can learn more about directives here and events here.

On to the next one.