Vue - 如何使用過濾器定期更新視圖中的值

我只是想用vue製作倒數計時器，但視圖不會更新。我app.js和index.html：Vue - 如何使用過濾器定期更新視圖中的值

var nowDate = new Date; 
 
var nextNewYearsEve = new Date(nowDate.getFullYear(), 11, 31, 23, 59, 59, 59); 
 
var timeLeftToNewYearsEve = nextNewYearsEve - nowDate; 
 
var app = new Vue({ 
 
\t el: '#app', 
 
\t data: { 
 
\t \t timeLeftToNewYearsEve: timeLeftToNewYearsEve 
 
\t }, 
 
\t filters: { 
 
\t \t date: function (val) { 
 

 
\t \t \t var timeLeftMonth = new Date(val).getMonth(); 
 
\t \t \t var timeLeftDay = new Date(val).getDay(); 
 
\t \t \t var timeLeftHour = new Date(val).getHours(); 
 
\t \t \t var timeLeftMinutes = new Date(val).getMinutes(); 
 
\t \t \t var timeLeftSeconds = new Date(val).getSeconds(); 
 

 
\t \t \t return timeLeftMonth + ' hónap ' + timeLeftDay + ' nap ' + timeLeftHour + ' óra ' + timeLeftMinutes + ' perc ' + timeLeftSeconds + ' és másodperc'; 
 
\t \t } 
 
\t }, 
 
\t methods: { 
 
\t \t update: function() { 
 
\t \t \t setInterval(function() { 
 
\t \t \t \t timeLeftToNewYearsEve = nextNewYearsEve - new Date(); 
 
\t \t \t \t console.log(timeLeftToNewYearsEve); 
 
\t \t \t }, 1000); 
 
\t \t } 
 
\t } 
 
}); 
 

 
app.update();

<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <div id="app"> 
 
\t \t {{timeLeftToNewYearsEve | date}} 
 
\t </div> 
 
\t <script src="https://unpkg.com/vue"></script> 
 
\t <script src="resource/app.js"></script> 
 
</body> 
 
</html>

我失去了什麼，爲什麼沒有更新視圖中的價值？

來源

2017-06-24 aboutus

您需要使用this來引用Vue中的值。

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

來源

2017-06-24 17:19:58 Bert

還沒有工作「這個」 :(這有什麼錯我的代碼？ – aboutus

是否更改使用箭頭功能？ – Bert

哇，謝謝，它正在箭頭功能。正如我猜，箭頭功能手柄'這'不同嗎？ – aboutus

Vue - 如何使用過濾器定期更新視圖中的值

回答

相關問題