Javascript 从vueJS方法调用的setTimeout（）不工作

我正在尝试允许用户从应用程序重置或关闭给定服务器。我现在正在界面上工作，想给用户一些消息，告诉他们正在发生什么。我显示在我的数据对象中定义的消息，以指示所采取的操作。我可以使用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?  

{{message}}

重置服务器
关机服务器
导出默认值{
数据：函数（）{
返回{
消息：“”
}
},
方法：{
systemPowerDown:function（）{
this.message=this.server+'：服务器关闭'；
},
systemReset:function（）{
this.message=this.server+'：正在重置'；
setTimeout（函数（）{
this.message=this.server+'：重置'；
}, 2000);
}
},
道具：[“服务器”]
}
我错过了什么明显的东西吗？还是有一些我不知道的vue限制？
此
的值在
设置超时内不同

如果您使用的是ES6，则可以使用箭头功能：

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

或者，如果没有，可以绑定
this
的值：

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

但是，由于从未使用过Vue，我不知道当您更改
此.message
的值时，它是否会重新渲染，或者您是否应该更改某些组件状态或其他内容。
因为您在
设置超时
中，
此
与您的Vue实例不对应。您可以改用
self
：

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

是否可以解决将
此
存储在超时函数之外的变量中的问题

像这样：

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

这样做是指正确的功能
systemReset
此消息是一个字符串，您如何以及何时显示它？是否可以归结为在超时功能中使用
此
关键字，所以它指的是超时函数而不是系统重置？我在我的段落中输出它，但只输出一次..@PatrickMcDermott，可能会发生这种情况吗？如果有人好奇，Vue知道在使用
bind（this）
时，当值发生变化时重新渲染。你就是救世主。这就是全部。多谢各位