vue.jsとDate

Jun302014

最近vue.jsが良いと聞いたので、サンプルサイトを作って遊んでいます。

vue.jsは所謂ViewModel的なオブジェクトを生成してあげるのですがそこで管理するデータはjsonで表現できるものでなければなりません。

それで困ったのがjavascriptのDate。そのままDateオブジェクトを管理しようとすると、うまくいきませんでした。

そこで、以下のように一旦ミリ秒(int)として管理して必要な値をcomputed(必要なときに計算する)として持つようにしました。

sample = new Vue
  el: '#sample'
  data:
    # うまくいかない
    #date: new Date()
    # 代わりにミリ秒で管理
    dateMs: Date.now()
  computed:
    year: () ->
      new Date(@dateMs).getFullYear()
    month: () ->
      new Date(@dateMs).getMonth() + 1
    ym: () ->
      # これはうまくいかない
      # "#{@year}年#{@month}月"
      date = new Date(@dateMs)
      m = date.getMonth()+1
      if m < 10
        m = '0' + m;
      "#{date.getFullYear()}年#{m}月"
  methods:
    nextMonth: () ->
      date = new Date @dateMs
      date.setMonth(date.getMonth()+1)
      @dateMs = date.getTime()
    prevMonth: () ->
      date = new Date @dateMs
      date.setMonth(date.getMonth()-1)
      @dateMs = date.getTime()

すごい間抜け感があります。。

Moment.jsとか使えばもう少し綺麗になるかもしれないけどこれだけのことに10kb近いライブラリを使いするのもどうかな。。

今回の例に関して言えば、使っているのは年と月だけなので、以下のほうが良かったかもですね。(拡張には弱そう)

sample = new Vue
  el: '#sample'
  data:
    year: new Date().getFullYear()
    month: new Date().getMonth() + 1
  computed:
    ym: () ->
      "#{@year}年#{@month}月"
  methods:
    nextMonth: () ->
      if @month == 12
        @year += 1
        @month = 1
      else
        @month += 1
    prevMonth: () ->
      if @month == 1
        @year -= 1
        @month = 12
      else
        @month -= 1

なんかもっとスマートな方法はないものか。。

vue.jsとDate

Profile

3100

Recent Articles

Tags

By Year

Built with