我想使用Vue.js的计算属性来监视我的应用程序的在线状态。基本上,我有以下Vue设置:
new Vue({
el: '#app',
computed: {
onLine: function (){
return navigator.onLine;
}
}
})
以下是标记:
<div id="app">
<div>{{ onLine }}</div>
</div>
我原本期望当我连接/断开计算机与网络时,“onLine”属性会在true和false之间改变。然而,这并没有发生...
唯一让它改变的方法是:
var app = new Vue({
el: '#app',
data: {
onLine: navigator.onLine // initial status
}
})
window.addEventListener('online', function(){
app.onLine = true;
});
window.addEventListener('offline', function(){
app.onLine = false;
});
我对Vue计算属性肯定有什么地方没理解透彻。谁能告诉我为什么它没有按照我预期的方式工作?
data
的更改做出反应,而不仅仅是你传递给它的任何内容。 - Bill Criswellnavigator.online
不是一个响应式属性。请查看Vue指南,尝试使用Vue.nextTick(callback)
或类似getter的行为。 - Yerko Palma