【Vue.js】computedとmoment.jsで日時をフォーマットする

こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。

このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。

今回は、

• 【Vue.js】computedとmoment.jsで日時をフォーマットする

について書いていきます。

【Vue.js】computedとmoment.jsで日時をフォーマットする

手順

1、computedに、moment.jsでフォーマットする処理を記述

// component.vue

computed: {
    // 開始日時
    startParse: function() {
      return moment(this.task.start).format('YYYY-MM-DDThh:mm')
    },
    // 終了日時
    endParse: function() {
      return moment(this.task.end).format('YYYY-MM-DDThh:mm')
    }
}

2、v-modelに、1のstartParseとendParseを指定し、computedの戻り値を使用する

//component.vue

<template>
  <b-form-input id="start-label" type="datetime-local" v-model="startParse" min="2000-01-01T00:00" max="2099-12-31T23:59" required></b-form-input>
</template>

これで日時が指定したフォーマットになります。

注意点

1、computedはmethodsと違って引数を持てない

2、computedは、戻り値をreturnして使うこと。

戻り値をthis.〇〇のようにプロパティには代入出来ない。

代入しようとするとエラーになる。

以上です。