我试图允许用户从应用程序重置或关闭给定服务器。我现在正在开发界面,并希望向用户提供有关正在发生的事情的消息。我显示数据对象中定义的消息来指示所采取的操作。我使用 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?
的价值this
里面是不同的setTimeout
.
如果您使用 ES6,则可以使用箭头函数:
setTimeout(() => { this.message = this.server + ': Reset' }, 2000)
或者如果你不是,你可以绑定的值this
:
setTimeout(function () {
this.message = this.server + ': Reset'
}.bind(this))
不过,没用过Vue,不知道当你改变了值的时候它是否会知道重新渲染this.message
,或者如果您应该更改某些组件状态或其他内容。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)