pco2699’s blog

学んだものについて、メモしておく場所

Vue.jsで簡単なタイマーアプリ

Vue JavaScript

つくりましたよ

Vue.js/Moment.jsで簡単なカウントダウン日付タイマーをつくりました

コード

js部

import moment from 'moment'
import Vue from 'vue'

let now_date = moment()

let date_format = 'YYYY:MM:DD HH:mm:ss'

let submission_date = moment('2017-09-22 23:59')
let presentaion_date = moment('2017-10-12 23:59')

const vm = new Vue({
  el: '#date',
  data: {
    now_date: now_date.format(date_format),
    submission_remain_days: now_date.diff(gga_submission_date, 'days'),
    presentaion_remain_days: now_date.diff(gga_presentaion_date, 'days')
  },
});

setInterval(()=>{
  vm.now_date = moment().format(date_format)
},1000)

html部

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Vue</title>
  </head>
  <body>
    <div id="date">
      <div class="row">
        <span class="label">現在日付:</span> <span class="data">{{now_date}}</span>
      </div>
      <div class="row">
        <span class="label">提出締切： </span> <span class="data">{{gga_submission_remain_days * -1}} </span>
      </div>
      <div class="row">
        <span class="label">発表： </span> <span class="data">{{gga_presentaion_remain_days * -1}} </span>
      </div>
    </div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

つまづきポイント

現在の日付を書き換えるのに、

let now_date = moment()

const vm = new Vue({
  el: '#date',
  data: {
    now_date: now_date.format(date_format), // ここでnow_dateをvmのdata部に設定
    submission_remain_days: now_date.diff(gga_submission_date, 'days'),
    presentaion_remain_days: now_date.diff(gga_presentaion_date, 'days')
  },
});

setInterval(()=>{
  now_date = moment().format(date_format) // 間違えてnow_date側のオブジェクトを取得しちゃっている...
},1000)

と、vueのdata部じゃなくて、設定するオブジェクト側を書き換えてたんだけど
もちろんこれは誤りで、ちゃんと、vueのdata部をsetInterval内で書き換えるようにしたらいけました。
(すごいシンプルな間違い。)

シンプルにView(html)とModel(js)をバインディングしてくれて非常に楽ですね〜
(ReactとかRiotとか使ったことないので、もっと楽かもだけど。)