Vue - как периодически обновлять значение в представлении с помощью фильтра

Question

Vue - как периодически обновлять значение в представлении с помощью фильтра

1

Я просто пытаюсь сделать таймер обратного отсчета с vue, но представление не обновляется. Мои app.js и 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 + ' hónap  ' + timeLeftDay + ' nap  ' + timeLeftHour + ' óra  ' + timeLeftMinutes + ' perc  ' + timeLeftSeconds + ' és másodperc';
		}
	},
	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>

Что мне не хватает, почему бы не обновить значение в представлении?

aboutus 24 июнь 2017, в 19:52

Источник

Теги:

javascript

vue.js

vuejs2

1 ответ

Ещё вопросы

Bert · Accepted Answer · 2017-06-24T15-37-00.000Z

Вы должны сослаться на значение в Vue с использованием this.

setInterval(() => {
  this.timeLeftToNewYearsEve = nextNewYearsEve - new Date();
  console.log(timeLeftToNewYearsEve);
}, 1000);

Все еще не работает с этим :( Что не так с моим кодом?
Вы изменили использовать функцию стрелки?
Вау, спасибо, с функцией стрелки это работает. Как я полагаю, функция стрелки обрабатывает это по-другому?