vueにおける検出断網処理

app.vueで変数を定義し、ブレークダウンを表示するかどうかを記録します.

data() {
    return {
        network: true //    
    };
},
// mounted       
mounted() {
    //     
    window.addEventListener("offline", () => {
        console.log("   ");
        this.network= false;
    });
    window.addEventListener("online", () => {
        console.log("     ");
        this.network= true;
    });
}

<template>
  <div id="app">
    
    <img
      class="nonet"
      v-if="!network"
      src="data:image/png;base64*******"
    />
    <router-view v-else />
  div>
template>