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.
- The HTML becomes:
<div id="app"> <ul> <li v-for="(sound, name) in animals"> The {{name}} goes {{sound}} </li> </ul> </div>
- And we need to create the animals object in the JavaScript:
new Vue({ el: '#app', data: { animals: { dog: 'woof', cat: 'meow', bird: 'tweet' } } })
