在Vue.js中，使用navigator.onLine时计算属性未更新。

Question

我想使用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计算属性肯定有什么地方没理解透彻。谁能告诉我为什么它没有按照我预期的方式工作？

- Abrab

---

我认为你的第二种方法是适当的方法。据我所知，计算属性会对data的更改做出反应，而不仅仅是你传递给它的任何内容。 - Bill Criswell

我不确定，但我猜测问题在于navigator.online不是一个响应式属性。请查看Vue指南，尝试使用Vue.nextTick(callback)或类似getter的行为。 - Yerko Palma

Answer 1

我曾经遇到过同样的问题，但通过使用能够带来Vue.js的监听方法来解决了它。 http://vuejs.org/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);

- LordHelloWorld

Answer 2

所以如果记忆没有错的话，被观察的对象必须是原始或简单的，“本地”的对象不能直接被观察。而该库将忽略尝试这样做的操作。

- Shaun Hubbard

---

我认为那只是一个打字错误。他提到底部的方法可行，但不像他希望的那样顶部的方法。 - Bill Criswell

@shaun-hubbard：抱歉，“View”只是一个笔误。至于你复制到jsfiddle中的我的代码部分，我知道它可以工作。我的问题是为什么我尝试的其他东西不起作用。 - Abrab