Vue.jsでカウントダウンアプリを作っている初学者です。
Startを押すとカウントダウンが始まるところまでは実装できたのですが、
Stopを押してclearIntervalをするところで引数を色々試しましたがカウンターが止まりません。
お手数ですがご教授のほどよろしくお願いします。
<!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> {{timer}} </div> <button v-if="!timer" @click="startTimer"> 開始 </button> <button v-if="timer" @click="stopTimer"> 停止 </button> </section> </body> <script> const app = new Vue({ el: '#app', // ======================== data: { title : "カウントダウン", time : 30, timer :false, }, // ======================== methods: { startTimer: function() { this.timer = true; setInterval(() => this.countdown(), 1000); }, stopTimer: function() { this.timer = false; clearInterval(this.countdown); }, countdown: function() { if(this.time > 0){ this.time--; } else{ alert("終了"); } } }, // ======================== computed: { } }) </script> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/05 05:07