vue 选项卡功能类似于新闻选项卡

想实现选项卡的功能，通过将后端返回的数据赋值给一个数组，然后对数组进行分组。在页面根据分组循环遍历数据

在控制太打印这个数组，length为0,但是其他部分数据时有内容的

希望大家指导一下，该怎么修改代码？谢谢。

在113行之后，把diseaseList.data打印出来看看它的结构，然后才能做下一步判断

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7474631
这篇博客你也可以参考下：vue项目中遇到需要输入两位小数时校验通过，并且后面多余的0是可以输入的情况如何处理？
除此之外, 这篇博客: VUE项目（单页面）问题之：从详情页返回列表页时返回到上次滚动位置，并还原列表页所有点击、搜索等状态中的 四、小激动 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
原本切换导航时，路由会记录滚动条的位置，为此写了一个方法，每次切换视图时，滚动条滚动到顶部
写了最后一步的 scrollBehavior 方法之后，可以把router.afterEach方法删除，可谓是一举两得。

以下回答来自chatgpt:

针对选项卡功能数组长度为0的问题，可能是由于数据还未请求到或异步请求有延迟导致的。建议先检查一下数据请求的问题。另外，也可以采用异步请求的方法，等到数据请求成功后再进行操作。以下是基于异步请求改进选项卡功能的示例代码：

<template>
  <div class="tab-wrap">
    <div class="tab-head">
      <ul>
        <!-- 循环遍历选项卡标题 -->
        <li v-for="(title, index) in tabTitle" :key="index" :class="activeTab === index ? 'active': ''" @click="changeTab(index)">
          {{ title }}
        </li>
      </ul>
    </div>
    <div class="tab-content">
      <!-- 循环遍历选项卡内容 -->
      <div v-for="(item, index) in tabContent" :key="index" v-show="activeTab === index">
        <p>{{ item.title }}</p>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前激活的选项卡，默认第一个
      tabTitle: [], // 选项卡标题数组
      tabContent: [] // 选项卡内容数组
    }
  },
  mounted() {
    this.getTabData() // 初始化获取选项卡数据
  },
  methods: {
    // 异步请求获取选项卡数据
    async getTabData() {
      try {
        const res = await axios.get('/getTabData') // 假设该接口返回一个包含选项卡数据的数组
        this.tabTitle = res.map(item => item.title) // 将标题赋值给选项卡标题数组
        this.tabContent = res.map(item => item.content) // 将内容赋值给选项卡内容数组
      } catch(err) {
        console.log(err)
      }
    },
    // 切换选项卡
    changeTab(index) {
      this.activeTab = index
    }
  }
}

上述代码采用了异步请求的方式获取选项卡数据，以避免数据还未请求到而导致数组为空的问题。在 mounted 钩子函数中调用 getTabData 方法，通过异步请求获取数据并将标题和内容分别赋值给对应的数组。注意，在获取数据时需要用 try-catch 捕获异常。最后，通过 v-for 循环遍历选项卡标题和内容，并用 v-show 控制展示哪一个选项卡的内容。同时，添加了 changeTab 方法用于切换选项卡。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

vue 选项卡功能 类似于新闻选项卡

vue 选项卡功能类似于新闻选项卡