1. 문제

문법을 모름

반복문에서 배열 데이터 item.id를 클래스 이름에 넣고싶었다.
일단 리액트에서 쓰던대로 해봄
(당연히 안됨 ㅠ)

▼내가 쓴 코드

<div class=`storeMap ${item.id}`>{{ item.storeName }}</div>

2. 해결

2-1. 공식문서 뒤져보기

https://v2.ko.vuejs.org/v2/guide/class-and-style.html
문서에 따르면 클래스 바인딩을 위해
v-bind:class 를 사용하면 된다고 함

<div v-bind:class="{ active: isActive }"></div>

근데 내가 원하는건 동적 데이터를 사용하는 것이라 적용되지 않았다.

2-2. 해결!

두가지 방법이 있는데 더 편한쪽으로 하면 된다.

1) Computed Property

점점 길어질때 쓰면 좋을 것 같은 문법

 computed: {
    storeMapClass() {
      return 'storeMap ' + this.item.id;
    }
  }
  
  ...
  
    <div :class="storeMapClass">{{ item.storeName }}</div>

2) 클래스 바인딩

<div :class="'storeMap ' + item.id">{{ item.storeName }}</div>

3) 템플릿 문자열

해봤는데 안되는건줄 알았더니 :class=""에 바로 작성하는게 아니라 :class=" '백틱 포함해서 여기에 작성' "이다.
자꾸 =""을 string으로 인식해서 큰일;;

<div :class="`storeMap ${item.id}`">{{ item.storeName }}</div>

---

클래스 바인딩으로 클래스 이름을 적용하는데 성공했다.

<div :class="'storeMap storeNum' + item.id"
v-for="item in data" :key="item.id">
   {{ item.storeName }}
</div>