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方法调用

回答

相关问题