javascript - Computed property not updated with navigator.onLine, in Vue.js - Stack Overflow

admin管理员组

文章数量:1344505

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

Share Improve this question Follow edited Dec 30, 2015 at 16:39 Abrab asked Dec 30, 2015 at 15:20 AbrabAbrab 84111 gold badge1111 silver badges2121 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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.

本文标签： javascriptComputed property not updated with navigatoronLinein VuejsStack Overflow