Vue.js 2 Cookbook

Arrays with index notation

When enumerating an array, we also have access to the index, represented by the variable i in the following code:

1. The HTML becomes:

        <div id="app">           <ul>             <li v-for="(animal, i) in animals">              The {{animal}} goes {{sounds[i]}}            </li>           </ul>         </div>

2. In the code part, write:

        new Vue({           el: '#app',           data: {             animals: ['dog', 'cat', 'bird'],             sounds: ['woof', 'meow', 'tweet']           }         })