vueJSメソッドからsetTimeout（）が呼び出されない

Question

ユーザーがアプリケーションから特定のサーバーをリセットまたはシャットダウンできるようにしようとしています。私は今、インターフェース上で作業していて、何が起こっているのかについてユーザにメッセージを伝えたいと思っています。私はデータオブジェクトに定義されたメッセージを表示して、実行されたアクションを示します。私はsetTimeoutを使用してリセットメッセージをリセットして....メッセージを切り替えます。次の方法を参照してください。

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? 

Answer 1

thisの値がsetTimeout内部異なります。あなたはES6を使用している場合

、あなたは矢印の機能を使用することができます。

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

それともいないのであれば、あなたはthisの値がバインドできます持つ、しかし

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

をVueを使用したことがなく、this.messageの値を変更したときに再レンダリングすることがわかっているのか、コンポーネントの状態などを変更する必要があるのか​​分かりません。

Answer 2

setTimeoutの中にいるので、thisはあなたのVueインスタンスに対応していません。あなたは代わりにselfを使用することができます。

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

Answer 3

はタイムアウト機能のうち、変数にthisを保存するのに解決していませんか？

ようなので：そう

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

は `正しい機能にsystemReset