如何控制vue-strap加载器显示隐藏：组件挂载前AJAX加载场景

没问题，我来帮你搞定这个加载状态的控制！要实现组件挂载前显示vue-strap的加载器，AJAX请求完成后隐藏的需求，你可以按照下面的步骤来操作：

首先，把vue-strap的Spinner组件放在你的Accordion组件之前，通过一个状态变量来控制它的显示/隐藏：

<template>
  <!-- 根据加载状态显示Spinner -->
  <spinner v-if="isLoading" type="primary" size="lg" />

  <accordion :one-at-a-time="true" type="info">
    <panel 
      :is-open="index === 0" 
      type="primary" 
      :header="'Day ' + day.day" 
      v-for="(day, index) in days" 
      :key="day.id"
    >
      <!-- 这里放置cycles.vue的内容，比如 <cycles :day-data="day" /> -->
    </panel>
  </accordion>
</template>

在组件的script部分，先引入需要的vue-strap组件，然后在data里定义isLoading变量（初始值设为true，表示一开始处于加载状态）：

<script>
// 引入vue-strap的组件
import { Spinner, Accordion, Panel } from 'vue-strap';
// 假设你用axios做AJAX请求，没有的话先安装：npm install axios
import axios from 'axios';

export default {
  components: {
    Spinner,
    Accordion,
    Panel
  },
  data() {
    return {
      isLoading: true,
      days: [] // 用来存储AJAX请求回来的days数据
    };
  },
  // 步骤3：发起AJAX请求并更新加载状态
  async mounted() {
    try {
      // 替换成你的实际接口地址
      const res = await axios.get('/api/get-days-data');
      this.days = res.data; // 把请求到的数据赋值给days变量
    } catch (err) {
      // 请求出错时的处理，比如打印错误或者提示用户
      console.error('加载天数数据失败:', err);
      // 可以在这里加个错误提示，比如this.$message.error('数据加载失败')
    } finally {
      // 不管请求成功还是失败，都要隐藏加载器
      this.isLoading = false;
    }
  }
};
</script>

• 用v-if而不是v-show：v-if会在加载状态结束后销毁Spinner组件，减少DOM节点；如果需要保留组件只是隐藏，可以换成v-show
• 你也可以用.then()的写法替代async/await，效果完全一致：

  mounted() {
    axios.get('/api/get-days-data')
      .then(res => {
        this.days = res.data;
      })
      .catch(err => {
        console.error('加载失败:', err);
      })
      .finally(() => {
        this.isLoading = false;
      });
  }
  

• 确保你已经正确安装并引入了vue-strap和axios，如果用的是其他AJAX库，只需要替换请求部分的代码即可

内容的提问来源于stack exchange，提问作者eComEvo