[ Vue ] V-Calendar / multi select

위코드를 수료 하고 취업을 한지 5개월 차가 되었다.
취업하기 전에는 가끔 공부한 것을 정리하고 글을 남기곤 했는데.. 역시나 취업을 하고 나니 글을 하나도 작성하지 않았다.😅
그동안의 나.. 반성해라!

회사에서는 Vue를 사용하고 있는데, Vue의 기본적인 것을 배우지 않고 업무를 시작했기 때문에 직접 부딪히면서 배우고 있는 느낌이다. 업무를 할 때 부족하다고 생각하는 부분들을 공부하고 정리하여 글을 올릴 예정이다.

V-Calendar 사용하기

먼저 V-calendar를 사용하려면 아래와 같이 install을 해주고,

Install via npm

npm install v-calendar

Components Method

V-Calendar 안에 있는 DatePicker를 부분적으로 import하고, components에 등록하여 사용할 수도 있다.

import DatePick from 'vue-date-pick';

export default {
  components: {
    DatePicker
  }
  ...
}

프로젝트에서는 API를 통해 날짜를 받아오고 그 날짜를 클릭하면 달력이 보이는 부분을 만들었어야 했다.

import DatePick from 'vue-date-pick';
import 'vue-date-pick/dist/vueDatePick.css';

위 처럼 vue-date를 import 해 주고 커스터마이징을 위한 css까지 import 해준다.

<div class="dateSelector-parents" ref="dateSelectorParents">
	<v-date-picker
	  v-model="date"
	  color="yellow"
	  :min-date="startLimit"
	  :max-date="endLimit"
	  :attributes="attributes"
	  :is-required="true"
	  @input="onDateInput"
	>
	  <template v-slot="{ inputValue, togglePopover }">
		<div class="d-flex justify-content-center align-items-center">
		  <button
		  class="inputValue start-date select-title"
		  :disabled="!isLoad"
		  @click="togglePopover({ placement: 'bottom' })"
	  >
		  <span :value="inputValue">{{ inputValue || date | titleDay }}</span>
		 </button>

		 <i class="fas fa-sort-down ml-2 mb-2" style="color: #343300"></i>
	   </div>
	  </template>
	</v-date-picker>
</div>

• {{ }}은 고정된 값이 아니라 DOM에서 데이터를 선언적으로 렌더링
• param.startAt에 API에서 받아 온 날짜를 저장
• 선택한 날짜를 :value="inputValue"로 저장하고
• |titleDay에 moment의 format을 적용하여 날짜를 원하는 포맷으로 적용

filters: {
    titleDay(date) {
      if (date === '') {
        return date;
      }
      return moment(date).format('MM.DD')
    },
  },

🤔 발견한 문제점
작업 완료 후 나중에 발견하게 된 문제점이 있는데 크롬브라우저에서는 날짜가 원하는 포맷으로 잘 보였는데, 사파리에서 확인을 해보니 날짜 부분이 Invalid Date라고 나오는 현상이 발생했다. 원인을 파악해 보니 날짜 간 포맷이 맞지 않아서 발생하는 문제였다.
return moment(date, 'YYYY.MM.DD').format('MM.DD');
위 처럼 date의 포맷을 먼저 YYYY.MM.DD로 설정해 준 뒤 format('MM.DD')을 적용하면 제대로 날짜가 보인다.

Vue multi select 사용하기

아래와 같이 먼저 install을 해준다.

npm install vue-multi-select --save

<vueMultiSelect
  class="pc-tags tags-title"
  v-model="selectedTags"
  :selectOptions="selectTagData"
  :options="selectTagOptions"
  :btnLabel="() => '태그선택'"
  :disabled="!isLoad"
  @close="onSelectTagClose"
  ref="tagSelector"
>

• v-model="selectedTags" 선택 된 태그
• :selectOptions="selectTagData"
• :options="selectTagOptions" 선택 된 태그의 배경색과 글자색을 바꿔준다.

cssSelected: option => {
  return option.selected ? { 'background-color': '#FFD400', color: '#FFFF' } : { 'background-color': '#FFFF' };
},

• @close="onSelectTagClose" 멀티셀렉터가 닫혔을 때 선택된 태그를 저장한다.