Vue.js Simplified - List Rendering (#5)

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.

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.