Q&A
カウントダウンのコードを勉強しています。
カウントダウンが開始ボタンを押すと開始されることろまではうまくいったのですが、
初期設定では30秒に設定しているのですが、開始ボタンを押すと2秒になります。
<!DOCTYPE html> <html> <head> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <section id="app"> <div> <div> <h2>{{title}}</h2> <div> <span>{{ time }}</span> </div> <button v-if="time" @click="startTimer"> 開始 </button> </section> </body> <script> const app = new Vue({ el: '#app', // ======================== data: { title : "カウントダウン", time : 30, }, // ======================== methods: { startTimer: function() { this.time = setInterval(() => this.countdown(), 1000); }, countdown: function() { this.time--; } }, // ======================== computed: { } }) </script> </html>
試したこと
methods: { startTimer: function() { this.time = 30; this.time = setInterval(() => this.countdown(), 1000); },
のように開始をクリックすると同時にdataを30に書き換えるようにしたのですが、それでも2と表示されてしまいます。
ご助力のほどよろしくお願い申し上げます。
回答1件
0
ベストアンサー
vue
1 this.time = setInterval(() => this.countdown(), 1000);
ここがおかしい。
setInterval関数の戻り値はIntervalIDという数値で、何が入るかは処理系依存です。
これをthis.timeに入れてしまうから変な数値から始まってしまう。
代入してるところを削除すればいいですよ。
vue
1 setInterval(() => this.countdown(), 1000);
投稿2018/08/03 13:40
総合スコア4447
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/03 14:27