我尝试使用计算的观看Navigator.online，但直到刷新网络才能工作？

Question

我尝试使用计算的观看Navigator.online，但直到刷新网络才能工作？

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

Answer 1

浏览器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在服务器上不存在。

Answer 2

那样

就像@kaocash

---

说的
您需要的是一个观察者：

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