개발환경

Nuxt3, PrimeVue3 사용
Tailwind css 같은 tool 사용 시 똑같음
일반 css를 사용하면 class가 아닌 style을 바인딩하는 것이 편하다.

---

문제점

v-for를 사용하여 만든 리스트를 클릭 시 내가 원하는 부분만 class를 변경해주어 어떤 것을 선택했는지 표시해주고 싶었지만 무작정 class를 바인딩해서 사용하니 전체가 변경되버리는 문제

---

해결방법

index를 저장해두는 변수를 하나 만들어두고 바꿔주고싶은 div에 삼항연산자를 사용하여 해당 index가 맞다면 바꿔주는 방식으로 사용

---

Example code

<div v-for="(col, index) in [배열]" :key="index">
	<div :class="[index 저장 변수] === index ? 변경 할 class : 변경 전 class"
		@click="[index 저장 변수] = index" >
		{{col}}
	</div>
</div>

const [index 저장 변수] = ref(0); // default 값으로 배열 0 번째
const [변경 전 class] = ref("변경 전 css들");
const [변경 할 class] = ref("변경 후 css들");

---

참조

• 클릭한 리스트에만 스타일 적용