Javascript Vue.js中未使用navigator.onLine更新计算属性

我想使用Vue.js计算属性来查看我的应用程序的联机状态。 基本上，我有以下Vue设置：

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

以及以下标记：

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

---

关于Vue计算属性，我一定有一些不了解的地方。谁能告诉我为什么它没有按我预期的方式工作？

因此，如果内存用于观察，那么观察到的对象必须是原始的或普通的，“本机”对象不能直接观察到。而图书馆将忽略这样做的尝试

我也遇到了同样的问题，但我通过使用带来Vue.js的监听方法解决了这个问题

---

我想那只是个打字错误。他提到了底部的工作方式，但没有像他希望的那样提到顶部。@shaun hubbard:对不起，“视图”只是一个输入错误。至于您复制到JSFIDLE中的代码部分，我知道它是有效的。我的问题是为什么我试过的另一种方法不起作用。我认为你的第二种方法是正确的方法。据我所知，计算属性会对

数据的更改做出反应，而不仅仅是传递给它的任何东西。我不确定，但我想问题在于
导航器。联机
不是反应性属性。检查并尝试类似于
Vue.nextTick（回调）
或类似getter的行为
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;
});

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);