Vue.js 2 Cookbook

How to do it...

Our application will consist of two blabber components that talk to each other. Here's the HTML:

<div id="app">   <blabber></blabber>   <blabber></blabber> </div>

Each blabber component will contain a script to recite as a dialogue. Since we want to keep it simple, the dialogue will be circular and will go on forever:

dialogue: [   'hello',   'how are you?',   'fine thanks',   'let's go drink!',   'alright, where?',   'to hello's bar',   'hello?' ]

This, along with the variable that will mark the current line to say, will stay inside the component's data:

data () {   return {     currentLine: 0,     dialogue: [       'hello',       'how are you?',       'fine thanks',       'let's go drink!',       'alright, where?',       'to hello's bar',       'hello?'     ]   } }

The ...