Vue

by Jacob Goh

HTML

<div id="app">
  onLine: {{ onLine }}
  <br>
  showBackOnline: {{ showBackOnline }}
</div>

Vue

new Vue({
  el: "#app",
  data: {
  	onLine: navigator.onLine,
    showBackOnline: false
  },
  methods: {
  	updateOnlineStatus(e) {
    	const { type } = e;
      this.onLine = type === 'online';
    }
  },
  watch: {
  	onLine(v) {
    	if(v) {
      	this.showBackOnline = true;
        setTimeout(()=>{ this.showBackOnline = false; }, 1000);
      }
    }
  },
  mounted() {
    window.addEventListener('online',  this.updateOnlineStatus);
    window.addEventListener('offline', this.updateOnlineStatus);
  },
  beforeDestroy() {
    window.removeEventListener('online',  this.updateOnlineStatus);
    window.removeEventListener('offline', this.updateOnlineStatus);
  }
})