In Vue most data is reactive. In practice this means that if something is going to change in our view-model, we will see the results immediately. This is what lets you concentrate on the app itself, leaving aside all the drawing logic. In this recipe, we are also going to acknowledge some limitations of this system.
To complete this recipe, you should know how to use basic data-binding (introduced in the very first recipe) and how to create lists (second recipe).
In the previous recipe we built a list for a countdown for a missile launch:
<div id="app">
<ul>
<li v-for="n in countdown">{{n}}</li>
<li>launch missile!</li>
</ul>
</div>new Vue({
el:'#app',
data: {
countdown:
[10,9,8,7,6,5,4,3,2,1]
}
})Wouldn't it be great if it was animated? We can tweak the JavaScript to add numbers to countdown as seconds pass:
- Copy the preceding code in the HTML and JavaScript sectors of JSFiddle, with the exception that we will fill the countdown ourselves, so set it to an empty array.
To get hold of the countdown variable we must pass the variable through the Vue instance itself.
- Assign the Vue instance to a variable for later reference:
var vm = new Vue({
el:'#app',
data: {
countdown: []
}
})This way we can use vm to access the Vue instance.
- Initialize the countdown from 10:
var counter = 10
- Set up a function that repeatedly adds the number of remaining seconds to the now empty
countdownarray:
setInterval(function () {
if (counter > 0) {
vm.countdown.push(counter--)
}
}, 1000)What we are going to do is get a reference of the countdown array and fill it with decrementing numbers with the help of setInterval.
We are accessing countdown through the vm variable we set in the line vm.countdown.push(counter--), so our list will get updated every time we add a new number to the array.
This code is very simple, just note that we must use the push function to add elements to the array. Adding elements with the square brackets notation will not work:
vm.countdown[counter] = counter-- // this won't work
The array will get updated, but this way of assignment will skip Vue's reactive system due to how JavaScript is implemented.
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 = 0 // nothing happens apparently
You can overcome this limitation using the splice method:
vm.reactiveArray.splice(index, 1, 'updated value') vm.reactiveArray.splice(0)