← Other topics

Vue.js Simplified - List Rendering (#5)

Series contents:

Video Notes

Introduction

Let’s look at rendering lists of values using Vue’s v-for directive. When working with v-for, you can iterate through arrays, objects, numbers, and/or strings.

The v-for directive works very similar to how JavaScript’s for...in statement works, as is demonstrated by the following examples.

This guide works with JavaScript arrays and objects. If you need a refresher on either of these topics, refer to the following MDN guides:

Example code

In the video I will use the following data properties to demonstrate list rendering:

data() {
    return {
        // [...existing data properties...]

        // Array example
        spanishWords: ['hola', 'adios', 'uno', 'dos'],

        // Object example
        word: { a: 'hola', b: 'hello' },

        // Array of objects example
        words: [
            { wordA: 'hola', wordB: 'hello' },
            { wordA: 'adios', wordB: 'goodbye' },
            { wordA: 'uno', wordB: 'one' },
            { wordA: 'dos', wordB: 'two' },
        ],
    }
}

Array rendering

Hypothetical array:

data() {
    return {
        spanishWords: ['hola', 'adios', 'uno', 'dos'],
    }
}

Iterating through the values of this array:

<li v-for='value in words'>{{ value }}</li>

Iterating through the values and the index of this array:

<li v-for='(value, index) in words'>{{ index }}: {{ value }}</li>

Notes:

  • Just like iteration using JavaScript’s for...in statement, alias names (the names used to the left of the in operator such as value and index) are arbitrary; what matters is the order in which they’re set up in the expression.
  • In all the examples in this guide we’re using a HTML <li> element because it’s a logical element for listing things. However, it’s not a requirement that you use <li>s; you could use other elements such as a <div>, <p>, <template>, etc.

Object rendering

Hypothetical object:

data() {
    return {
        word: { a: 'hola', b: 'hello' },
    }
}

Iterating through the values of this object:

<li v-for='value in word'>{{ value }}</li>

Iterating through the values and keys of this object:

<li v-for='(value, key) in word'>{{ key }} : {{ value }} </li>

Iterating through the values, keys, and indexes of this object:

<li v-for='(value, key, index) in word'>{{ index }}: {{ key }} = {{ value }}</li>

Array of objects rendering

Hypothetical array of objects:

data() {
    return {
        words: [
            { a: 'hola', b: 'hello' },
            { a: 'adios', b: 'goodbye' },
            { a: 'uno', b: 'one' },
            { a: 'dos', b: 'two' },
        ],
    }
}

Example 1:

<li v-for='pair in words'>{{ pair }}</li>

Example 2:

<li v-for='pair in words'>{{ pair.a }}</li>

Example 3:

<li v-for='pair in words'>The translation of {{ pair.a }} is {{ pair.b }}</li>

Number and string rendering

If needed, you can also iterate through a number or string value:

<div v-for='n in 10'>{{ n }}</div>
<div v-for='character in "hola"'>{{ character }}</div>

Filtering: Combining v-if and v-for

If you use the v-if and v-for directive on the same element, the v-if takes precedence. Because of this, something like the following would not work:

<ul>
    <li v-for='spanishWord in spanishWords' v-if='spanishWord.length <= 3'>{{ spanishWord }}</li>
</ul>

This would fail because v-if='word.length <= 3'' is evaluated first, and word will not be defined until the v-for which defines word is evaluated.

To address this, separate the v-for out to a parent element, e.g.:

<li v-for='spanishWord in spanishWords'>
    <template v-if='spanishWord.length <= 3'>
        {{ word }}
    </template>
</li>

Alternatively, it’s better to use computed properties when creating filtered lists, which is something we’ll discuss in an upcoming guide.

Questions?

If you have questions or any issues when running through the above notes, post a comment on the video on YouTube. I monitor all my comments and will do my best to respond promptly!

← Other topics