v-for 루프의 요소에 클래스를 추가하는 중

v-for 루프의 요소에 클래스를 추가하는 중

나는 v-for 루프를 가지고 있고, 나는 만들기를 원합니다.background: red;클래스를 추가합니다.그러나 수행 단추를 클릭하면 모든 인덱스가 색칠됩니다.제 목표는 우선순위 버튼을 클릭할 때 3개의 요소가 있으면 해당 줄(색인) 배경을 빨간색으로 만드는 것입니다.즉, 목록 요소는 배경을 빨간색/노란색/녹색으로 만듭니다.

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

지금은 일반 vuejs의 클래스 바인딩 속성을 시도합니다.하지만 제가 말씀드린 것처럼 모든 부서를 물들입니다.

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

간단한 해결책은 다음을 추가하는 것입니다.color각 작업관리 개체에 고정합니다.

그런 다음 클래스를 적용합니다.item.color === 'red'등등..

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

색상은 다음과 같이 적용합니다.

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

언급URL : https://stackoverflow.com/questions/72056428/adding-class-to-element-in-v-for-loop