getter와 setter 예제

computed는 어떠한 값(props, this.data)을 변화하여 손쉽게 사용하기 위한 메소드 이며, computed를 통해 나온 값을 바꾸고 싶을 때도 있습니다.
이럴 때는 getter, setter를 이용하여, 값을 다루는데 그 예제를 다뤄보겠습니다.

회사가 element-ui를 쓰고 있기에, 예제 코드도 element-ui 위주로 쓰겠습니다.

<template>
  <!-- 시간 값 정하는 ui, 예약 제한 시간을 가진다 -->
  <el-time-select
    format="HH:mm"
    value-format="HH:mm"
    v-model="bookingLimitTime"
  />
</template>
<script lang="ts">
export default {
  data() {
    return {
      time: "2020-01-23 10:00" as string
    };
  },
  computed: {
    bookingLimitTime: {
      get(): string {
        //this.moment(this.time).format("HH:mm") === '10:00'
        return this.moment(this.time).format("HH:mm");
      },
      set(value: string) {
        //value === '12:11'
        this.time = `${this.time.slice(0, -6)} ${value}`;
      }
    }
  }
};
</script>

위 처럼 날짜 전체 값이 들어오지만 핸들링 할 값은 시, 분 만 가질때, computed로 시, 분만 가져오고, setter로 바뀐 시, 분을 computed에 쓰인 데이터로 바꾸어주면 된다.

#vue