フラッシュメッセージを実装しよう

s-yoshiii · Jul 19, 2022 · 7ee5719 · 7ee5719
1 parent 7053545
commit 7ee5719
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
@@ -21,6 +21,15 @@
             >LOGIN</v-btn
           >
           <v-btn @click="reset">CLEAR</v-btn>
+          <v-alert
+            dense
+            text
+            type="success"
+            class="success-message"
+            v-if="message"
+          >
+            {{ message }}
+          </v-alert>
         </v-form>
       </v-card>
     </div>
@@ -37,7 +46,14 @@ export default {
       (v) => /.+@.+\..+/.test(v) || "メールアドレスが不正です",
     ],
     password: "",
+    message: "",
   }),
+  mounted() {
+    if (localStorage.message) {
+      this.message = localStorage.message;
+      localStorage.message = "";
+    }
+  },
   computed: {
     isValid() {
       console.log("isValid", this.valid);
@@ -73,4 +89,7 @@ export default {
 .login-btn {
   margin-right: 20px;
 }
+.success-message {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue
@@ -90,6 +90,7 @@ export default {
             displayName: this.name,
           });
           console.log("updateuser", this.user);
+          localStorage.message = "新規作成に成功しました";
           this.$router.push("/login");
         })
         .catch((error) => {