Vue filter

Vue에서는 특정 데이터를 가공하여 표현할 수 있는 filter라는 기능을 제공한다.

사실 어떻게 보면 computed와 유사한 성격을 가지지만, 정형화된 형식을 가진 computed라고 생각하면 되고, computed와 달리 전역으로 설정도 가능하다.

필터 사용방법
Vue는 텍스트 형식화 할 수 있는 필터 기능을 제공한다. 필터는 중괄호 보간법, v-bind 표현법(2.1.0+ 부터)에서 사용 할 수 있다. 필터는 JavaScript 표현식 마지막의 파이프(|) 기호와 함께 사용한다.

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

로컬 필터 정의
컴포넌트의 옵션으로 로컬 필터를 정의할 수 있다.

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

전역 필터 정의
Vue 인스턴스 생성 전(new Vue() 전)에 전역으로 필터를 정의할 수 있다.

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

필터 체이닝
필터 함수의 첫번째 전달인자는 JavaScript의 표현식의 값이다. 위의 예제의 capitalize 필터 함수의 첫번째 전달인자의 값은 message다. 필터는 연결(체이닝)될 수 있다.

{{ message | filterA | filterB }}

위의 코드의 경우에 filterA의 전달인자는 message이고, filterB의 전달인자는 filterA의 결과 값(filterA 함수가 message의 전달인자로 계산되어진 값)이 된다.

필터 함수 전달인자
필터 함수는 일반적인 JavaScript 함수이기 때문에 두개 이상의 전달 인자를 가질 수 있다.

{{ message | filterA('arg1', arg2) }}

위의 코드의 filterA 필터 함수는 3개의 전달 인자를 가지는 함수이다. 첫번째 전달인자는 message의 값이고, 두번째 전달인자는 'arg1'이라는 문자열이다. 세번째 전달인자는 arg2 변수의 값을 전달인자로 가진다.

vue-til 프로젝트에서 날짜를 표현하는 부분이 현재 2021-07-13T11:09:36.968Z 이렇게 서버에서 받은 데이터 표기법을 가공하지 않은 채 그대로 표현되고 있다.

날짜 표기법을 filter를 이용하여 변경해보자.

<div class="post-time">
  {{ postItem.createdAt | formatDate }}
  <i class="icon ion-md-create" @click="routeEditPage"></i>
  <i class="icon ion-md-trash" @click="deleteItem"></i>
</div>

<script>
...중략
filters: {
  formatDate(value) {
    const date = new Date(value);
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    month = month > 9 ? month : `0${month}`;
    const day = date.getDate();
    let hours = date.getHours();
    hours = hours > 9 ? hours : `0${hours}`;
    let minutes = date.getMinutes();
    minutes = minutes > 9 ? minutes : `0${minutes}`;
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  },
},
</script>

postItem.createdAt이 인자로 사용되고, formatDate가 리턴된 값이 머스태치 표현식으로 표현된다.