Trying to create a countdown timer with vue, but the view is not updating. Here are my app.js and index.html:
var nowDate = new Date;
var nextNewYearsEve = new Date(nowDate.getFullYear(), 11, 31, 23, 59, 59, 59);
var timeLeftToNewYearsEve = nextNewYearsEve - nowDate;
var app = new Vue({
el: '#app',
data: {
timeLeftToNewYearsEve: timeLeftToNewYearsEve
},
filters: {
date: function (val) {
var timeLeftMonth = new Date(val).getMonth();
var timeLeftDay = new Date(val).getDay();
var timeLeftHour = new Date(val).getHours();
var timeLeftMinutes = new Date(val).getMinutes();
var timeLeftSeconds = new Date(val).getSeconds();
return timeLeftMonth + ' month ' + timeLeftDay + ' day ' + timeLeftHour + ' hour ' + timeLeftMinutes + ' minute ' + timeLeftSeconds + ' second';
}
},
methods: {
update: function () {
setInterval(function () {
timeLeftToNewYearsEve = nextNewYearsEve - new Date();
console.log(timeLeftToNewYearsEve);
}, 1000);
}
}
});
app.update();<html>
<head>
</head>
<body>
<div id="app">
{{timeLeftToNewYearsEve | date}}
</div>
<script src="https://unpkg.com/vue"></script>
<script src="resource/app.js"></script>
</body>
</html>Any idea why the value in the view is not updating?