Add class only to specific elements with V-for

Thing you want to do

Suppose you set the data pulled from the DB to data in the vue component and display it with v-for. If you set a boolean value in any of the data pulled from the DB, you can change the movement in v-for, but How to do it when you want to make a change such as "add data only in that component and add class only to specific content in v-for".

Description

//Depiction part

<template>
 <div>
  <div v-for="task in tasks" :key="task.id">
  　<div class="task__title">{{task.title}}</div>
　　//For example, this task.body only, depending on the conditions is-If you want to add an active class
  　<div class="task__body" v-bind:class="{'is-active':active === task}" >{{task.body}}
　</div>
　<button v-on:click="addActive(task)">Add class to body</button>

 </div>
</template>


<script>
export default {
　data(){
         return{
                tasks:[ ],//There is data pulled from db in this
                active:null   
            }
        },
　methods:{
          addActive(task){
           if(this.active === task){
             this.active = null;
           }else{
            this.active = task;
           }
          }
        }
}
</script>

Like this, by passing the value (task) in v-for as an argument, that active can be made a task. This allows you to apply a class only to a specific task.