[TIL/VUE] v-model로 select box 다루기 (2가지 방법)

• 하고싶은 것
  select box에 값을 넣고, 고르면 value 가져오기
  (페이지당 몇개의 데이터를 보여줄 지에 대한 데이터를 활용했다.)

예제 1 (watch 활용)

<script>
import { ref } from 'vue'

export default {
	data() {
    return {
      perPageList: [
        {
          id:1,
          value: 5,
        },
        {
          id:2,
          value: 10,
        },
        {
          id:3,
          value: 15,
        }
      ],
      perPage: 10
    }
  },
  watch: {
    perPage() {
      console.log(this.perPage) // 5, 10, 15 가 콘솔에 찍힌다.
    }
  },
}
</script>

<template>
   <span>
     <select v-model="perPage">
       <option v-for="perPage in perPageList" :key="perPage.id" :value="perPage.value">{{ perPage.value }}/page</option>
     </select>
   </span>
</template>

설명

data() 에서 정의한
perPageList 는 어떤 값을 선택하게 할 지 보여주게 할 데이터이다.

perPage는 실제 사용할 값이다. (미리 10을 넣어두고 default로 보여주게 할 수 있다.)
watch에서 가져오는 값은 :value를 통해 가져올 수 있다.

실제 보여주는 값은 {{ perPage.text }}로 지정해둘 수 있다.

---

예제2 (@change 활용)

<script>
export default {
	data() {
    return {
      perPageList: [
        {
          id:1,
          value: 5,
        },
        {
          id:2,
          value: 10,
        },
        {
          id:3,
          value: 15,
        }
      ],
      perPage: 10
    }
  },
  methods: {
    change() {
      console.log(this.perPage) // 5, 10, 15 가 콘솔에 찍힌다.
    }
  }
}
</script>
<template>
   <span>
     {{perPage}}
     <select v-model="perPage" @change="change()">
       <option v-for="perPage in perPageList" :key="perPage.id" :value="perPage.value">{{ perPage.value }}/page</option>
     </select>
   </span>
</template>

설명

watch대신에, select model에 @change 옵션을 활용해서 change메소드를 호출했다.
이 방법이 더 효율적이라고 한다. (프론트팀 동료분이 알려주셨다)
watch는 계속 값이 바뀌는걸 감지를 하고, @change의 경우 바뀌었을 경우에만 작동하기 때문이다.