Vue3 Composition API中如何根据当前选中标签页动态获取对应PDF路径？

你只需要调整pdfSrc的计算逻辑，自动匹配当前处于激活状态的tab即可，具体实现如下：

方法1：Composition API 写法（推荐，和你现有写法对齐） #

把计算逻辑全部放到setup中，不需要额外新增状态，直接从tabs数组里筛选激活项即可：

import { computed } from 'vue'

// 保留你原有props定义
props: {
  tabs: {
    type: Array as PropType<Array<any>>,
    required: true,
  },
},

setup(props) {
  // 计算当前激活的tab
  const activeTab = computed(() => {
    return props.tabs?.find(tab => tab.current) ?? props.tabs?.[0]
  })

  // 动态拼接PDF路径
  const pdfSrc = computed(() => {
    if (!activeTab.value) return ''
    return `/img/modal/pdf/${encodeURIComponent(activeTab.value.pdf)}.pdf`
  })

  const changeTab = (selectedTab: { id: number }) => {
    // 补充提示：Vue 规范不允许直接修改props，建议把状态更新逻辑移到父组件，或者把tabs改为当前组件内部的ref变量
    props.tabs?.forEach((t) => {
      t.current = t.id === selectedTab.id
    })
  }

  return {
    changeTab,
    pdfSrc
  }
}

方法2：选项式 computed 写法 #

如果你不想调整现有结构，保留选项式的computed，直接修改逻辑即可：

computed: {
  pdfSrc(): string {
    const activeTab = this.tabs.find(tab => tab.current) || this.tabs[0]
    return `/img/modal/pdf/${encodeURIComponent(activeTab.pdf)}.pdf`
  }
}

额外优化建议 #

• 模板中v-for的key现在用的是tab.name，但你定义的tabs项没有name字段，建议改为:key="tab.id"避免渲染异常
• 模板中v-if="pdf != ''"的pdf变量未定义，建议改为v-if="activeTab.pdf != ''"
• 不要直接修改props里的tabs属性，违反单向数据流规范，会触发Vue运行时告警，可以通过父组件传事件回调的方式更新tabs状态

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