スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

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

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

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のstartParseendParseを指定し、computedの戻り値を使用する

<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.〇〇のようにプロパティには代入出来ない。 代入しようとするとエラーになる。