개발자의 품격 Vue.js 입문 강의를 참고하였습니다.

Vue Event(method) 함수

1. Click 이벤트

<template>
  <div>
    <button @click="increaseCounter">Add 1</button>
    <p>{{counter}}</p>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      counter: 0
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    increaseCounter() {
      this.counter += 1
    }
  }
}
</script>

Add 1 버튼을 클릭할 때마다 1이 추가된 값이 아래 출력된다.

2. Change 이벤트

<template>
  <div>
    <select name="" id="" @change="changeCity" v-model="selectedCity">
													// @change 대신 v-on:change 사용 가능
      <option value="">==도시선택==</option>
      <option
        :value="city.cityCode"
        :key="city.cityCode"
        v-for="city in cityList"
        >
        {{ city.title }}
      </option>
    </select>
    <select name="" id="">
		  <option
		    :value="dong.dongCode"
		    :key="dong.dongCode"
		    v-for="dong in selectedDongList"
		  >
		    {{ dong.dongTitle }}
		  </option>
		</select>
  </div>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      selectedCity: '',
      cityList: [
        { cityCode: '02', title: '서울' },
        { cityCode: '051', title: '부산' },
        { cityCode: '064', title: '제주' }
      ],
      dongList: [
        { cityCode: '02', dongCode: '1', dongTitle: '서울 1동' },
        { cityCode: '02', dongCode: '2', dongTitle: '서울 2동' },
        { cityCode: '02', dongCode: '3', dongTitle: '서울 3동' },
        { cityCode: '02', dongCode: '4', dongTitle: '서울 4동' },
        { cityCode: '051', dongCode: '1', dongTitle: '부산 1동' },
        { cityCode: '051', dongCode: '2', dongTitle: '부산 2동' },
        { cityCode: '051', dongCode: '3', dongTitle: '부산 3동' },
        { cityCode: '064', dongCode: '1', dongTitle: '제주 1동' },
        { cityCode: '064', dongCode: '2', dongTitle: '제주 2동' }
      ],
      selectedDongList: []
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    changeCity() {
      this.selectedDongList = this.dongList.filter(dong => dong.cityCode === this.selectedCity)
    }
  }
}
</script>

도시를 선택하면 그 도시에 속하는 동이 리스트로 나온다

예를 들어 서울을 선택하면 서울 코드인 '02'가 selectedCity 값으로 들어가고 @change="changeCity" 함수가 cityCode가 '02'인 동을 필터링해서 동 리스트로 뽑아준다.

또는 @change 없이 filter를 사용해서 직접 태그 안에 코드를 추가할 수도 있다.
이 경우에는 가독성이 떨어진다는 단점이 있다 (실무에서는 잘 안씀)

<select name="" id="">
  <option
    :value="dong.dongCode"
    :key="dong.dongCode"
    v-for="dong in dongList.filter((dong) => dong.cityCode === selectedCity)"
  >
    {{ dong.dongTitle }}
  </option>
</select>

3. Key(Enter) 이벤트

<template>
  <div>
    <input
      type="search"
      name=""
      id=""
      @keyup="checkEnter($event)"
      v-model="searchText"
    >
    <button @click="doSearch">조회</button>
  </div>
</template>
<script>
//
export default {
  components: {},
  data() {
    return {
      searchText: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    doSearch() {
      console.log(this.searchText)
    },
    checkEnter(event) {
      if (event.keyCode === 13) {
        this.doSearch()
      }
    }
  }
}
</script>

checkEnter() 함수는 눌린 키가 엔터키인지 확인하고 맞다면 doSearch() 함수를 실행한다.
doSearch() 함수는 input을 통해 searchText로 들어온 값을 콘솔에 출력한다.

그런데 checkEnter 함수 없이도 간단하게 enter를 인식하는 더 쉬운 방법이 있다!

<template>
  <div>
    <input
      type="search"
      name=""
      id=""
      @keyup.enter="doSearch"
      v-model="searchText"
    >
    <button @click="doSearch">조회</button>
  </div>
</template>
<script>
//
export default {
  components: {},
  data() {
    return {
      searchText: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    doSearch() {
      console.log(this.searchText)
    }
  }
}
</script>

@keyup.enter="doSearch" : 엔터키가 눌리면 doSearch() 함수 실행