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计算属性的东西。谁能告诉我为什么它不按我预期的方式工作？

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

Answer 2

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

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

2 个答案: