Vue.js 2 Cookbook

There's more

Running the code now will add countdown numbers one at a time; great, but what about the final element launch missile? We want that to appear only at the end.

To do that here is a little hack we can do directly in HTML:

<ul>   <li v-for="n in countdown">{{n}}</li>   <li>{{ countdown.length === 10 ? 'launch missile!' : '...' }}</li> </ul>

This solution is not the best we can do; learn more in the recipe on v-show.

We just learned that we cannot add elements to a reactive array with the brackets notation if we want it to update in the view. This is true also for the modification of elements using brackets and for manually changing the length of the array:

vm.reactiveArray[index] = 'updated value' // won't affect the view vm.reactiveArray.length ...