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.

Recommended Posts

Add class only to specific elements with V-for
[Java] Add quotes only to specific CSV columns
How to run only specific files with gem's rake test
Add foreign key to column with migrate
How to limit IP address only to a specific directory with laravel + nginx
Add scripts to distributions created with gradle
Scraping and writing specific elements to a file
Override protected method with anonymous class to stub
How to conditionally add html.erb class in Rails
[Java] Article to add validation with Spring Boot 2.3.1.
Add packages to your project with Swift PM
(Java) How to implement equals () for a class with value elements added by inheritance
[Java] Sort ArrayList with elements of your own class
How to implement UICollectionView in Swift with code only
I want to monitor a specific file with WatchService
I want to apply ContainerRelativeShape only to specific corners [SwiftUI]
[IOS] To allow rotation of only a specific screen
[Rails] Allow only people with specific server residents/specific roles of Discord to authenticate in sign-in