Vue.js 2 Cookbook

There's more

If you followed the first recipe in this chapter, you'll remember how we greeted a variable number of worlds; we can make the experience more interactive. Let's build a list of planets we'd like to greet:

<div id="app">   <ul>     <li v-for="world in worlds">{{world}}</li>   </ul> </div>new Vue({   el: '#app',   data: {     worlds: ['Terran', 'L24-D', 'Ares', 'New Kroy', 'Sebek', 'Vestra']   } })

We want to be able to keep track of newly conquered worlds and delete the ones we destroy. This means adding and removing elements from the list. Consider the following HTML:

<ul>   <li v-for="(world, i) in worlds">     {{world}}   <button @click="worlds.splice(i, 1)">Zap!</button>   </li> </ul> <input v-model="newWorld"/> <button @click="worlds.push(newWorld)">Conquer</button> ...