131. vue Filters | 지역 Filters, 전역 Filters 사용 법

https://v2.vuejs.org/v2/guide/filters.html?redirect=true#ad 

Filters — Vue.js

---

1. PostListItem.vue (지역 Filters 로 사용시)

- 필터는 파이프를 ( | ) 를 이용해여 콧수염괄호 안에 필터 함수의 이름을 넣어주면 Data에 필터함수의 결과를 결합하여 나온 결과가 화면에 뿌려진다

<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,
    },
  },
  // 1. filters 생성
  filters: {
    formatDate(value) {
      // new Date는 기본적으로 JS에서 제공되는 객체 (날짜표시 관련 객체)
      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>

<style></style>

filter 사용 전 후

---

2. filters.js (전역 Filters 로 사용시) 

- 특정 텍스트롤 형식화 할 일이 있다면 이렇게 vue Filteres 기능을 추천

- 지역보다는 여러 컴포넌트에서 사용되기 때문에 전역으로 설정하는것을 추천한다.

// 필터 관련 함수가 존재하는 파일

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}`;
}

 

3. Main.js

import Vue from 'vue';
import App from './App.vue';
import router from '@/routes/index';
import store from '@/store/index';
import { formatDate } from '@/utils/filters';

// filter 전역 설정
Vue.filter('formatDate', formatDate);
Vue.config.productionTip = false;

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

 

4. PostListItem.vue 

- 지역 Filters 를 주석처리 해도 전역 Filters 가 적용된다

<template>
  <li>
    <div class="post-title">
      {{ postItem.title }}
    </div>
    <div class="post-contents">
      {{ postItem.contents }}
    </div>
    <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>
  </li>
</template>

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

export default {
  props: {
    postItem: {
      type: Object,
      required: true,
    },
  },
  // 이 컴포넌트에만 유용한 지역 필터
  // filters: {
  //   formatDate(value) {
  //     // new Date는 기본적으로 JS에서 제공되는 객체 (날짜표시 관련 객체)
  //     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>

<style></style>