setTimeout() not working called from vueJS method

问题:

I am trying to allow a user to reset or shutdown a given server from an app. Im working on the interface right now, and want to give the user messages as to what is happening. I display a message defined in my data object to indicate the action taken. I thene use setTimeout to switch a resetting.... message with a reset message. See the following method.

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

    } 

In my browser I can trigger this message and my message of "Resetting" displays, but the following "Reset" message is never output. Do I have any formatting errors?

To put this method in context here is my entire component.

  <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?  

回答1:

The value of this is different inside the setTimeout.

If you're using ES6, you can use an arrow function:

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

Or if you're not, you can bind the value of this:

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

However, having never used Vue, I don't know if it will know to re-render when you change the value of this.message, or if you should be changing some component state or something.

回答2:

Because you're inside a setTimeout, this doesn't correspond with your Vue instance. You can use self instead :

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

回答3:

Could be solved of storing this in a variable out of the timeout function?

Like so:

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

Doing so refers to the correct function systemReset