We'll build a syllabus to study programming. When we are done with a topic, we'll feel relieved and we want to incorporate that feeling in our app by making the topic float away from the syllabus as we learn it.
The data of the list will be in our Vue instance:
new Vue({ el: '#app', data: { syllabus: [ 'HTML', 'CSS', 'Scratch', 'JavaScript', 'Python' ] } })
The list will be printed in our HTML with the following code:
<div id="app"> <h3>Syllabus</h3> <ul> <li v-for="topic in syllabus"> {{topic}} </li> </ul> </div>
When we press a button, we want the topic to disappear from the list. For this to happen, we need to modify the code we have written.
First, let's add a Done button before each topic:
<li v-for="topic ...
