클릭시 글씨 굵게 만들기

css에서 :active로 하면 되는줄 알았는데

• 문제) 마우스로 눌렀을때만 css 적용되고 떼면 바로 풀림
• 해결) :focus로 하니까 됨

그런데 테두리 굵게 하는 것 정도는 :focus로 됐는데

• 문제) div 내에 존재하는 글씨 굵기를 바꾸는건 안됨
• 해결) :class로 바인드 걸어서 클릭이벤트 처리해야했다.

//template
<button class="button_size" v-for="(size, index) in state.sizes" :key="size" @click="handleMethod(size, index)">
  <div class="button_size_body1"  :class="{ 'active': activeIndex === index }">{{ size }}</div>
  <div class="button_bottom">
  	<div v-for="(tmp, i) in state.rowCheaper" :key="i">
      <div v-if="tmp.sellProductSize === size">
      	<div class="button_size_body3"  :class="{ 'active': activeIndex === index }">{{ tmp.sellWishPrice }}</div>
      </div>
    </div> 
  </div>
</button>

//script
const activeIndex = ref(null);

const handleMethod = (size, index) => {
  activeIndex.value = index;
  ...
}
  
//style
.button_size_body1.active, .button_size_body3.active {
  font-weight: bold;
}