<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
div#app { padding: 30px; margin: 30px auto; width: 300px; text-align: center;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
div#time { font-size: 25pt; padding: 5px; margin: 0px auto; background: #ccc;
width: 200px; border: 1px solid black; }
</style>
</head>I am struggling with a Vue.js timer that should count up to 10 seconds using the moment() method. However, I am facing an issue where the timer does not stop after reaching 10 seconds. I have tried using both a variable 'count' and clearInterval() but without success. Can anyone provide some guidance on how to properly set clearInterval when the timer reaches 10 seconds?
<body>
<div id="app">
<h1>counter1</h1>
<div id="time">{{ time }}</div>
</div><script type="text/javascript">
var count=0;
var app = new Vue({
el: '#app',
data: {
time: "0",
count:0
},
mounted() {
this.startTime = moment();
let callback = () => {
let time_diff = moment().diff(this.startTime);
this.time = moment.utc(time_diff).format("s");
this.running=true;
};
let interval= () =>{ setInterval(callback, 1000);
++count;
if(count==10) clearInterval(interval);
}
interval();
}
})
</script>