I am currently developing an application that allows a user to reset or shutdown a particular server. I am focused on creating the interface and ensuring that the user receives appropriate messages about the actions being taken. My approach involves displaying a predefined message from a data object to communicate the action being executed. I then utilize setTimeout to toggle between displaying a "resetting..." message and a "reset" message. Below is the method I am using:
systemReset: function(){
this.message = this.server + ': Resetting';
setTimeout(function(){
this.message = this.server + ': Reset';
}, 2000);
}
When testing this in my browser, the initial "Resetting" message appears as expected, but the subsequent "Reset" message is not displayed. Are there any errors in my formatting that might be causing this issue?
For better understanding, here is the complete component code:
<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 overlooking something obvious? Could there be a Vue limitation that I am not aware of?