I want to use Vue.js puted properties to watch the online status of my app. Basically, I have the following Vue setup:

new Vue({
    el: '#app',
    puted: {
        onLine: function (){
            return navigator.onLine;
        }
    }
})

And the following markup:

<div id="app">
    <div>{{ onLine }}</div>
</div>

I expected that when I would connect/disconnect my puter from the network, the "onLine" property would change between true and false. However, this doesn't happen...

The only way I could have it change is that one:

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 must be something that I don't understand about Vue puted properties. Who could tell me why it didn't work the way I expected ?

I want to use Vue.js puted properties to watch the online status of my app. Basically, I have the following Vue setup:

new Vue({
    el: '#app',
    puted: {
        onLine: function (){
            return navigator.onLine;
        }
    }
})

And the following markup:

<div id="app">
    <div>{{ onLine }}</div>
</div>

I expected that when I would connect/disconnect my puter from the network, the "onLine" property would change between true and false. However, this doesn't happen...

The only way I could have it change is that one:

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 must be something that I don't understand about Vue puted properties. Who could tell me why it didn't work the way I expected ?

• javascript
• vue.js

• 1 I think your second approach would be the proper way to approach it. As far as I understand it, puted properties would react to the data changing, not just any thing you pass to it. – Bill Criswell Commented Dec 30, 2015 at 16:52
• I'm not sure, but I guess that the problem is that navigator.online is not a reactive property. Check the Vue guide and try something like Vue.nextTick(callback) or the getter-like behavior – Yerko Palma Commented Jan 4, 2016 at 18:46

2 Answers 2

I had the same problem, but I solved it by using methods to listen that brings Vue.js http://vuejs/guide/reactivity.html#Change-Detection-Caveats

var app = new Vue({
    el: '#app',
    data: {
      onLine: navigator.onLine // initial status
    }
  });

  function updateConnectionStatus() {
    app.$set('onLine', navigator.onLine); // this method
  }

  window.addEventListener('online', updateConnectionStatus);
  window.addEventListener('offline', updateConnectionStatus);

So if memory serves observed objects must be primitive or plain, "native" objects cannot be directly observed. And the library will ignore attempts to do so.