Let's set up the riddle in our HTML:
<div id="app"> <article> They call me fruit.<br> They call me fish.<br> They call me insect.<br> But actually I'm not one of those. <div id="solution" @click="showSolution = true"> I am a <span id="dragon" v-show="showSolution">Dragon</span> </div> </article> </div>
The Vue instance is initialized very easily; you just have to write the following:
new Vue({ el: '#app', data: { showSolution: false } })
In the CSS, we want to make clear that the <div> solution can be clicked on, and so we add the following rule:
#solution { cursor: pointer; }
At this point the application works, but you will see the Dragon immediately. We want to add a touch of class to our riddle and ...
