Vue.js 2 Cookbook

Objects

The preceding example can be refactored to match animal names and their sounds so that an accidental misalignment of the index will not affect our list.

1. The HTML becomes:

        <div id="app">           <ul>             <li v-for="(sound, name) in animals">               The {{name}} goes {{sound}}             </li>           </ul>         </div>

2. And we need to create the animals object in the JavaScript:

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