Adding class to element in v-for loop - vue.js

Question

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/

Answer 1

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
...