DMrFrost DMrFrost - 3 years ago 253
Javascript Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download