javascript - setTimeout() not working called from vueJS method -

i trying allow user reset or shutdown given server app. im working on interface right now, , want give user messages happening. display message defined in data object indicate action taken. thene use settimeout switch resetting.... message reset message. see following method.

    systemreset: function(){             this.message = this.server + ': resetting';             settimeout(function(){                 this.message = this.server + ': reset';             }, 2000);      }  

in browser can trigger message , message of "resetting" displays, following "reset" message never output. have formatting errors?

to put method in context here 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>  missing obvious?  or there vue limitation unaware of?   

the value of this different inside settimeout.

if you're using es6, can use arrow function:

settimeout(() => { this.message = this.server + ': reset' }, 2000) 

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

settimeout(function () {   this.message = this.server + ': reset' }.bind(this)) 

however, having never used vue, don't know if know re-render when change value of this.message, or if should changing component state or something.