CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
Kerem Unce
Kerem Unce

Reputation: 57

Adding class to element in v-for loop

I have a v-for loop, and I wanna make background: red; by adding a class. But when I click my action button it coloring all indexes. My goal is if I have 3 elements when I click the priority button then make that line(index) background red. I mean list element make the background red/yellow/green whichever.

<div v-for="(item, index) in todos" :key="item.id">
    <div :class="{'bg-red-500': isRed, 'bg-yellow-500': isYellow, 'bg-green-500': isGreen}" class="rounded transition ease-in-out delay-200 duraiton-200 flex align-middle justify-between">

        <div id="checklist" @click="addCompleted(index)" class="w-1/2 break-all text-white transition duration-200 ease-out text-1xl text-left my-5 transition ease-in-out delay-150   duration-200 cursor-pointer flex justify-start align-center">
            <input v-bind:id="item.id" type="checkbox" name="checkbox" class="outline-0 offset-0 ring-0 border-0 focus:outline-0 focus:ring-0 focus:offset-0 focus:border-0 focus:ring-offset-0" />
            <label v-bind:for="item.id">{{ item.text }}</label>
        </div>

        <div class="priority flex items-center justify-between text-white">
            <div @click="priortiy_red(index)" class="red rounded-full bg-red-500 p-2 "></div>
            <div @click="priortiy_yellow(index)" class="yellow rounded-full bg-yellow-500 p-2 mx-2"></div>
            <div @click="priortiy_green(index)" class="green rounded-full bg-green-500 p-2 "></div>
        </div>

        <span class="X-icon  items-center justify-end inline-flex cursor-pointer" @click="removeTodo(index)">
            <svg class="fill-current text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                <path d="M0 0h24v24H0z" fill="none" />
            </svg>
        </span>
    </div>
</div>

What I Try for now I try normal vuejs's class bind property. But as I say it coloring all divisions.

Github Repo Link: https://keremunce.github.io/Vue-ToDo/

Upvotes: 2

Views: 750

Answers (1)

tauzN
tauzN

Reputation: 6931

A simple solution is to add a color prop to each todo object.

Then apply class with item.color === 'red' etc..

... 'bg-red-500': item.color === 'red', 'bg-yellow-500': item.color === 'yellow', 'bg-green-500': item.color === ''green ...

and apply color with:

...
@click="item.color = 'red'"
// etc
...

Upvotes: 1

Related Questions