setTimeout（）not working從vueJS方法調用

我試圖讓用戶從應用程序重置或關閉給定的服務器。我現在在界面上工作，並且想給用戶關於正在發生的消息。我在我的數據對象中顯示一條消息以指示所採取的操作。我使用setTimeout來切換重置消息和重置消息。請參閱以下方法。setTimeout（）not working從vueJS方法調用

systemReset: function(){ 
      this.message = this.server + ': Resetting'; 
      setTimeout(function(){ 
       this.message = this.server + ': Reset'; 
      }, 2000); 

    }

在我的瀏覽器我可以觸發這個消息，我的「重置」顯示的消息，但下面的「復位」消息是從來沒有輸出。我有任何格式錯誤？

把這個方法放在上下文中是我的整個組件。

<template> 
    <div> 
     <p>{{message}}</p> 
     <button @click="systemReset">Reset Server</button> 
     <button @click="systemPowerDown">Poweroff Server</button> 
    </div> 
    </template> 

    <script type="text/javascript"> 
    export default{ 
     data: function(){ 
     return{ 
      message: '' 
     } 
     }, 
     methods: { 
     systemPowerDown: function(){ 
      this.message = this.server + ': Server Down'; 
     }, 
     systemReset: function(){ 
      this.message = this.server + ': Resetting'; 
      setTimeout(function(){ 
       this.message = this.server + ': Reset'; 
      }, 2000); 
     } 
     }, 
     props: ['server'] 
    } 
    </script> 

Am I missing something obvious? Or is there some vue limitation I am unaware of?

來源

2017-07-25 DMrFrost

'this.message'是一個字符串，如何以及何時你顯示它？ – Teemu

是否可以在超時函數中使用'this'關鍵字，所以它指的是超時函數而不是systemReset？ –

我輸出它在我的段落 – DMrFrost

的this值是setTimeout內部不同。

如果您使用ES6，你可以用一個箭頭功能：

setTimeout(() => { this.message = this.server + ': Reset' }, 2000)

或者如果你沒有，你可以的this值綁定：

setTimeout(function() { 
    this.message = this.server + ': Reset' 
}.bind(this))

然而，有從未使用過Vue，我不知道當你改變this.message的值時它是否會重新渲染，或者你是否應該改變一些組件狀態或其他東西。

來源

2017-07-25 10:51:46

由於您位於setTimeout之內，因此this與您的Vue實例不符。您可以使用self代替：

systemReset: function(){ 
    this.message = this.server + ': Resetting'; 
    var self = this; 
    setTimeout(function(){ 
     self.message = self.server + ': Reset'; 
    }, 2000); 
}

來源

2017-07-25 10:51:46 Treast

可以解決在變量存儲this出超時功能的呢？

像這樣：

systemReset: function(){ 
      var $this = this; 
      $this.message = this.server + ': Resetting'; 
      setTimeout(function(){ 
       $this.message = this.server + ': Reset'; 
      }, 2000); 
     }

這樣做是指正確的函數systemReset

來源

2017-07-25 10:54:15

setTimeout（）not working從vueJS方法調用

回答

相關問題