我尝试使用 computed 来观看 navigator.onLine 但在刷新网络之前无法正常工作？

Question

我尝试使用 computed 来观看 navigator.onLine 但在我刷新网络之前无法使用？

<template><div>{{isOnline}}</div></template>
...
<scirpt>
...
  computed: {
    isOnline() {
      return navigator.onLine;
    },
  },
...
</script>

Answer 1

就像@Kaocash 所说的浏览器api 不是反应式的，所以观察者不会工作

原回答：

好吧，计算属性将在组件上的数据更改时更新，你需要的是一个观察者:

<template><div>{{isOnline}}</div></template>
...
<script>
...
  data() {
      return {
          isOnline: true
      }
  },
  watch: {
    'navigator.onLine'(val) {
      this.isOnline = val
    },
  },
...
</script>

Answer 2

浏览器api 没有反应。因此，每当它们的值发生变化时，Vue 都不知道。

要监听 navigator.onLine 更改，您必须使用浏览器触发的本机事件（请参阅 docs）：

data () {
  return {
    online: false,
  }
},
methods: {
  onOffline () { this.online = false },
  onOnline () { this.online = true },
  created() {
    window.addEventListener('offline', this.onOffline)
    window.addEventListener('online', this.onOnline)
  },
  destroyed() {
    window.removeEventListener('offline', this.onOffline)
    window.removeEventListener('online', this.onOnline)
  }
}

注意：小心SSR，服务器上不存在window。

我尝试使用 computed 来观看 navigator.onLine 但在刷新网络之前无法正常工作？

I try to use computed to watch navigator.onLine but not work until I refresh the web?

html

navigator

vue.js

vuejs2