Fixed the bug by added key triggered update and v-if (#383)

f3l1x98 · georg-schwarz · web-flow · commit c53388c8d618 · 2021-11-11T11:49:02.000+01:00
* Fixed the bug by added key triggered update and v-if

* PipelineStorageView: use null instead of undefined for unloaded element =&gt; avoids error

Co-authored-by: Georg Schwarz &lt;schwarz@group.riehle.org&gt;
diff --git a/ui/src/storage/StorageItemView.vue b/ui/src/storage/StorageItemView.vue
@@ -1,11 +1,20 @@
 <template>
   <div>
-    <div v-if="item !== null">
+    <div v-if="item != null">
       <v-card class="grey lighten-3">
         <v-container fluid>
-          <pre style="max-height: 400px; overflow:auto; text-align: left">{{
-            item.data
-          }}</pre>
+          <pre
+            v-if="item.data !== undefined"
+            style="max-height: 400px; overflow:auto; text-align: left"
+          >
+            {{ item.data }}
+          </pre>
+          <pre
+            v-else
+            style="max-height: 400px; overflow:auto; text-align: left"
+          >
+            No Data
+          </pre>
         </v-container>
 
         <v-divider />
@@ -45,8 +54,8 @@ import { StorageItem } from './storage-item';
 import { StorageRest } from './storageRest';
 
 @Component({})
-export default class PipelineStorageOverview extends Vue {
-  private item: StorageItem | undefined = undefined;
+export default class StorageItemView extends Vue {
+  private item: StorageItem | null = null;
 
   private clipUrl = clipboardCopy;
 
@@ -58,11 +67,14 @@ export default class PipelineStorageOverview extends Vue {
   @Prop()
   private readonly itemId!: number;
 
-  private mounted(): void {
-    this.storageRest
-      .getStoredItem(this.pipelineId, this.itemId)
-      .then(item => (this.item = item))
-      .catch(error => console.error('Failed to fetch stored items', error));
+  async mounted(): Promise<void> {
+    try {
+      this.item =
+        (await this.storageRest.getStoredItem(this.pipelineId, this.itemId)) ||
+        null;
+    } catch (error) {
+      console.error('Failed to fetch stored items', error);
+    }
   }
 
   private get storageItemUrl(): string {
