見出し画像

【実装】このサイトを再読み込みしますか？

りん蔵 | アリマイリン

離脱ダイアログ表示処理が未設定の場合、離脱ダイアログ表示処理を設定する。

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8" />
   <title>sample</title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 </head>
 <body>
   <div id="app">
     <input type="text" :value="name" @input="change($event.target.value)" />
     <p>入力した名前は {{ name }} です。</p>
   </div>
   <script>
     new Vue({
       el: "#app",
       data: {
         name: "guest"
       },
       methods: {
         change(value) {
           this.name = value;
           //離脱ダイアログ表示処理が未設定の場合、離脱ダイアログ表示処理を設定する
           if (!window.onbeforeunload) {
             window.onbeforeunload = () => "";
           }
         }
       }
     });
   </script>
 </body>
</html>

この記事が気に入ったらサポートをしてみませんか？