[vue.js] style toggle button 만들기

1. 버튼의 css 스타일 추가를 위해 .isSelected class 생성하고, true or false 토글 기능의 citySelected() 메소드를 생성한다.
2. 리스트가 여러개일 경우 data(){Object} 데이터 안에 오브젝트를 배열 형태로 만들 수 있다.
3. :class="{ isSelected: city.selected === true}"는 :class="{ isSelected: city.selected}"로 줄여서 사용 가능하다

html

<template>
  <ul class="city-buttons">
  	<li 
    @click="selectCity(city)"
    :class="{ isSelected: citySelected === true }"
    v-for="city in cities" :key="city.code">
    {{ city.lable }}
    </li>
  </ul>
</template>

js

<script>
  export default {
    name: 'city-selector',
    data() {
      cities: [
        { code: "Seoul", label: "서울", selected: false},
        { code: "London", label: "런던", selected: false},
        { code: "Chicago", label: "시카고", selected: false},
      ]
    },
    methods: {
      selectCity(item) {
        item.selected = !item.selected;
      }
    }
  }
</script>

css

<style>
  .city-buttons {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
  }
  .city-buttons li {
      cursor: pointer;
  }
  .isSelected {
      background: #333;
      color: #fff
  }
</style>