[Vue.js] Today I Learned - 데이터 포맷팅

데이터 포맷팅

뷰의 Filters 속성을 이용하여 서버에서 받아온 데이터의 형식을 지정할 수 있다.

지역 필터

해당 컴포넌트 내에서만 동작하는 필터를 구현한다.

<!-- src/components/posts/PostListItem.vue -->
<template>
  <li>
    <div class="post-title">
      {{ postItem.title }}
    </div>
    <div class="post-contents">
      {{ postItem.contents }}
    </div>
    <div class="post-time">
      <!-- filters 속성에 정의된 함수 사용 -->
      <!-- 파이프라인(|) 하나만 사용 -->
      {{ postItem.createdAt | formatDate }}
      <i class="icon ion-md-create" @click="routeEditPage"></i>
      <i class="icon ion-md-trash" @click="deleteItem"></i>
    </div>
  </li>
</template>

<script>
import { deletePost } from '@/api/posts';

export default {
  props: {
    postItem: {
      type: Object,
      required: true,
    },
  },
  // filters 속성 사용
  filters: {
    formatDate(value) {
      return new Date(value);
    },
  },
  methods: {
    async deleteItem() {
      if (confirm('You want to delete it?')) {
        await deletePost(this.postItem._id);
        this.$emit('refresh');
      }
      // console.log('deleted');
    },
    routeEditPage() {
      const id = this.postItem._id;
      this.$router.push(`/post/${id}`);
    },
  },
};
</script>

전역 필터

전역 변수처럼 여러 컴포넌트에서 사용 가능하도록 필터를 구현한다.

// src/utils/filters.js
// 필터 관련 함수가 존재하는 파일
export function 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}`;
  const minutes = date.getMinutes();
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from '@/routes/index';
import store from '@/store/index';
// 정의된 필터 함수 import
import { formatDate } from '@/utils/filters';
// Vue의 filter 속성 추가
Vue.filter('formatDate', formatDate);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app');

※ 지역 필터명과 전역 필터명이 동일하면 지역 필터가 동작한다.