Added alert box to save project but need a way to trigger an error?

src/views/NewEditProjectView.vue

@@ -63,11 +63,10 @@
       </button>
     </div>
   </section>
-  <div
-    class="hidden dismissable-alert bg-slate-100 p-5 rounded drop-shadow-lg absolute top-3 inset-x-3 transition-transform ease-in duration-300"
-  >
+  <div v-bind:class="computedAlertClassNames()">
     <button
       class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+      @click="onClickClose()"
     >
       <i class="fa-solid fa-xmark"></i>
     </button>
@@ -200,10 +199,11 @@ export default class NewEditProjectView extends Vue {
         console.log("Got resp data:", resp.data);
         if (resp.data?.success?.fullIri) {
           this.errorMessage = "";
+          this.alertTitle = "";
+          this.alertMessage = "";
           useAppStore().setProjectId(resp.data.success.fullIri);
           setTimeout(
             function (that: Vue) {
-              console.log("THAT:", localStorage.getItem("projectId"));
               const route = {
                 name: "project",
               };
@@ -218,13 +218,19 @@ export default class NewEditProjectView extends Vue {
         let userMessage = "There was an error. See logs for more info.";
         const serverError = error as AxiosError;
         if (serverError) {
+          this.isAlertVisible = true;
           if (serverError.message) {
+            this.alertTitle = "User Message";
             userMessage = serverError.message; // This is info for the user.
+            this.alertMessage = userMessage;
           } else {
-            console.log("Server gave an error:", serverError);
+            this.alertTitle = "Server Message";
+            this.alertMessage = JSON.stringify(serverError.toJSON());
           }
         } else {
           console.log("Here's the full error trying to save the claim:", error);
+          this.alertTitle = "Claim Error";
+          this.alertMessage = error as string;
         }
         // Now set that error for the user to see.
         this.errorMessage = userMessage;
@@ -232,6 +238,12 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+
   public async onSaveProjectClick() {
     this.isHiddenSave = true;
     this.isHiddenSpinner = false;
@@ -249,5 +261,23 @@ export default class NewEditProjectView extends Vue {
   public onCancelClick() {
     this.$router.back();
   }
+
+  isAlertVisible = false;
+  public computedAlertClassNames() {
+    return {
+      hidden: this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      absolute: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
 }
 </script>