Vue.js を使用し、開催イベントの終了までの残り時間を1秒ごとカウントダウンした表示を行いたく、下記のような記述をしているのですが、カウントダウンされずに読み込んだ時点での残り時間が表示されてしまいます。
各イベントの終了時刻は end_time
に入っており、moment.js の diff
により現在の時間からイベント終了時刻までを取って来て表示、というところまではできたのですが、(下記 noweventlist.vue の count() )その中の setInterval
がうまく動作していない、という状況にあります。
now-event-list.json
json
1[ 2 { 3 "checkedin": false, 4 "begin_time": "2018-07-15T09:00:00.000Z", 5 "end_time": "2018-07-14T09:00:00.000Z", 6 }, 7 { 8 "checkedin": true, 9 "begin_time": "2018-07-14T09:00:00.000Z", 10 "end_time": "2018-07-14T09:00:00.000Z", 11 }, 12 { 13 "checkedin": true, 14 "begin_time": "2018-07-13T09:00:00.000Z", 15 "end_time": "2018-07-14T09:00:00.000Z", 16 }, 17 { 18 "checkedin": true, 19 "begin_time": "2018-07-12T09:00:00.000Z", 20 "end_time": "2018-07-13T09:00:00.000Z", 21 } 22]
index.pug
pug
1body 2 #app 3 .p-pane-target-container 4 .p-pane-target(:id='pane1[0].id' :class='{"is-visible":currentId1==pane1[0].id}') 5 .c-label 現在開催中のイベント 6 noweventlist(:noweventlistchild='noweventlist')
noweventlist.vue
vue
1<template lang="pug"> 2div 3 section.p-event-list.is-now-event(v-for='item in noweventlistchild') 4 .c-date-thumb 5 .c-date-thumb__year {{item.begin_time|year}} 6 .c-date-thumb__month {{item.begin_time|month}} 7 .c-date-thumb__date {{item.begin_time|date}} 8 .c-date-thumb__day {{item.begin_time|day}} 9 span.c-badge.p-event-list__badge.u-bg--secondary(v-if='item.unrd>0') {{item.unrd}} 10 .p-event-list__detail 11 .p-event-list__check-in-status 12 i.glyph.glyph-check-circle 13 span(v-if='item.checkedin') チェックインしています 14 span(v-else) チェックインしていません 15 .p-event-list__remain 残り時間 あと 16 span(v-html='count(item.end_time)') 17</template> 18 19<script> 20import moment from 'moment' 21export default { 22 props: ['noweventlistchild'], 23 methods: { 24 count(time) { 25 let diff = moment(time).diff(moment()) 26 // この箇所がうまく動作しません① 27 setInterval(()=>{ 28 diff = moment(time).diff(moment()) 29 },1000) 30 let duration = moment.duration(diff) 31 const days = Math.floor( duration.asDays()) 32 const hours = duration.hours() 33 const minutes = duration.minutes() 34 const seconds = duration.seconds() 35 let remain = `${days}日${hours}時間${minutes}分${seconds}秒` 36 // 上記①でなくこのように記述しても動作しません 37 setInterval(()=>{ 38 remain = `${days}日${hours}時間${minutes}分${seconds}秒` 39 },1000) 40 return remain 41 }, 42 }, 43 filters: { 44 format_test(time) { 45 return moment(time).format('YYYY/MM/DD HH:mm') 46 }, 47 year(time) { 48 return moment(time).format('YYYY') 49 }, 50 month(time) { 51 return moment(time).format('MM') 52 }, 53 date(time) { 54 return moment(time).format('DD') 55 }, 56 day(time) { 57 return moment(time).format('dddd') 58 }, 59 }, 60} 61</script>
app.js
js
1import Vue from 'vue' 2import axios from 'axios' 3import noweventlist from './components/noweventlist.vue' 4 5// ============================== 6// Vue インスタンス 7// ============================== 8const app = new Vue({ 9 el: '#app', 10 // 使うコンポーネント 11 components: { 12 noweventlist, 13 }, 14 data() { 15 return { 16 // 現在のイベントリスト格納用 17 noweventlist: [], 18 } 19 }, 20 21 created() { 22 // ------------------------------ 23 // 現在のイベントリスト表示用データ取得 24 // ------------------------------ 25 axios.get('../../__source/_data/now-event-list.json') 26 .then(function(response) { 27 this.noweventlist = response.data 28 }.bind(this)).catch(function(e){ 29 console.error(e) 30 }) 31 }, 32}) 33
Vue.js はまだ知見が足りないためご助力いただけますと幸いです。
また、記述面や意味がわからない等のご指摘もいただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/17 21:41
2018/09/17 21:47
2018/09/17 21:52
2018/09/17 22:21
2018/09/17 22:25
2018/09/17 22:30