Vue.js 2 Cookbook

How to do it...

You will build a little game--a bus station simulator!

Whenever a bus--represented by its emoji--leaves the station, all the other buses will drive a little ahead to take its place. Every bus is identified by a number, as you can see from the Vue instance data:

new Vue({   el: '#app',   data: {     buses: [1,2,3,4,5],     nextBus: 6   } })

Whenever a new bus arrives, it will have a progressive number assigned. We want a new bus to leave or go every two seconds. We can achieve this by hooking a timer when our component is mounted on screen. Immediately after data, write the following:

mounted () {   setInterval(() => {     const headOrTail = () => Math.random() > 0.5     if (headOrTail()) {       this.buses.push(this.nextBus)  this.nextBus += ...