Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Transitions and Animations Chapter 13

})

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 in syllabus">

<button @click="completed(topic)">Done</button>{{topic}}

</li>

Here, the completed method will look like this:

methods: {

completed (topic) {

let index = this.syllabus.indexOf(topic)

this.syllabus.splice(index, 1)

}

}

Running the code now will reveal a simple application for checking off the topics we
already studied. What we want though is an animation that will make us feel relieved.

For that, we need to edit the container of our list. We remove the

tag and, instead, tell



the to compile to a

tag:



<transition-group tag="ul">

<li v-for="topic in syllabus" :key="topic">

<button @click="completed(topic)">Done</button>{{topic}}

</li>

</transition-group>