From c73dbab6e59b7e4245a3a4883db509d79f1b1b1c Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 2 Oct 2022 10:34:05 +0800
Subject: [PATCH] fix

---
 web_src/js/components/RepoBuildView.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/RepoBuildView.vue b/web_src/js/components/RepoBuildView.vue
index 79b0d2b2d0..d35a4c4715 100644
--- a/web_src/js/components/RepoBuildView.vue
+++ b/web_src/js/components/RepoBuildView.vue
@@ -69,7 +69,7 @@
 
 <script>
 import {SvgIcon} from '../svg.js';
-import Vue from 'vue';
+import Vue, {createApp} from 'vue';
 import AnsiToHTML from `ansi-to-html`;
 
 const sfc = {
@@ -135,6 +135,9 @@ const sfc = {
     // show/hide the step logs for a step
     toggleStepLogs(idx) {
       this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded;
+      if (this.currentJobStepsStates[idx].expanded) {
+        this.loadJobData();
+      }
     },
 
     formatDuration(d) {
@@ -275,7 +278,7 @@ const sfc = {
         // sync the currentJobStepsStates to store the job step states
         for (let i = 0; i < this.currentJobSteps.length; i++) {
           if (!this.currentJobStepsStates[i]) {
-            this.$set(this.currentJobStepsStates, i, {cursor: null, expanded: false}); // array must use $set
+            this.currentJobStepsStates[i] = {cursor: null, expanded: false};
           }
         }
         // append logs to the UI
@@ -298,10 +301,8 @@ export function initRepositoryBuildView() {
   const el = document.getElementById('repo-build-view');
   if (!el) return;
 
-  const View = Vue.extend({
-    render: (createElement) => createElement(sfc),
-  });
-  new View().$mount(el);
+  const view = createApp(sfc);
+  view.mount(el);
 }
 
 </script>