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

setTimeout（）无法从vueJS方法调用

3 个答案: