loadings

src/views/exercise_questions/create/components/exercises/ChineseQuestion.vue

@@ -26,7 +26,12 @@
       <div class="content">
         <label class="title-little">题目：</label>
         <ul>
-          <li v-for="(item, i) in data.option_list" :key="i" v-loading="loading_list[i].loadings" class="content-item">
+          <li
+            v-for="(item, i) in data.option_list"
+            :key="i"
+            v-loading="loading_list[i] ? loading_list[i].loadings : false"
+            class="content-item"
+          >
             <span
               v-if="data.property.learn_type === 'dictation'"
               class="question-number"
@@ -57,9 +62,12 @@
             />
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-              <span v-loading="loading_list[i].loading" class="auto-btn" @click="handleMatically(item, i)">{{
-                item.audio_file_id ? '已生成' : '自动生成'
-              }}</span>
+              <span
+                v-loading="loading_list[i] ? loading_list[i].loading : false"
+                class="auto-btn"
+                @click="handleMatically(item, i)"
+                >{{ item.audio_file_id ? '已生成' : '自动生成' }}</span
+              >
             </div>
             <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
             <el-input
@@ -212,6 +220,34 @@ export default {
       ],
     };
   },
+  watch: {
+    'data.option_list.length': {
+      handler(val) {
+        this.loading_list = [];
+        for (let i = 0; i < val; i++) {
+          let obj = {
+            loading: false,
+            loadings: false,
+          };
+          this.loading_list.push(obj);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    // if (this.data.option_list.length > 3) {
+    //   let length = this.data.option_list.length - 3;
+    //   for (let i = 0; i < length; i++) {
+    //     let obj = {
+    //       loading: false,
+    //       loadings: false,
+    //     };
+    //     this.loading_list.push(obj);
+    //   }
+    // }
+  },
   methods: {
     addOption() {
       this.data.option_list.push(getOption());

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -10,7 +10,9 @@
     <!-- 笔画学习 -->
     <div :class="['words-box', 'words-box-' + data.property.learn_type]">
       <div v-for="(item, index) in option_list" :key="index" :class="['words-item']">
-        <template v-if="item.content && item.content.trim() && item.hz_strokes_list[0].strokes">
+        <template
+          v-if="item.content && item.content.trim() && item.hz_strokes_list[0] && item.hz_strokes_list[0].strokes"
+        >
           <div
             v-if="data.property.learn_type !== 'dictation'"
             class="words-top"