Looking to utilize Vue.js computed properties to monitor the online status of my application. Here is how I have set up Vue:
new Vue({
el: '#app',
computed: {
onLine: function (){
return navigator.onLine;
}
}
})
Here is the markup being used:
<div id="app">
<div>{{ onLine }}</div>
</div>
The expectation was that when connecting or disconnecting from the network, the "onLine" property would toggle between true and false. However, this expected behavior did not occur...
The workaround found was as follows:
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;
});
There seems to be a misunderstanding with Vue computed properties. Can someone clarify why it didn't function as anticipated?