我是Vuejs的新手，我目前正在使用組合API，所以我有一個這樣的陣列：
const tabs = ref([
{
id: 1,
pdf。'name1',
...
},
{
id: 2,
pdf: 'name2',
...
},
{
id: 3,
pdf: 'name3',
...
},
])
然后我有一個這樣的div：
<div
v-for="tab in tabs"
:key="tab.name"
:href="tab.href"
class="px-12 pt-8 flex flex-col"
:class="[tab.current || 'hidden']"
@click="changeTab(tab)"
>
<div v-if="pdf != ''">
<div class="pt-4 font-bold underline">
<a :href="pdfSrc" target="_blank">查看PDF</a>
</div>
</div>
</div>
然后我用計算的方式來獲取當前的href值：
props: {
tabs: {
type: Array as PropType<Array<any>>。
required: true,
},
},
計算的。{
pdfSrc(): string {
return `/img/modal/pdf/${encodeURIComponent(this.tabs[0].pdf)}.pdf`。
},
}
正如你所看到的，我總是使用tabs[0]，所以pdf值總是值name1，我想根據選定的標簽獲得
標簽方法：
setup(props) {
const changeTab = (selectedTab: { id: number }) => {
props.tabs?.map((t) => {
t.id === selectedTab.id ? (t.current = true) : (t.current = false)
})
}
回傳 {
changeTab,
}
},
我怎樣才能根據當前的標簽將靜態的索引0改為動態的呢？
uj5u.com熱心網友回復：
我建議創建一個新的變數來跟蹤選定的標簽。
const selectedTabId = ref(0);
類似于tabs，這可以在陣列中傳遞下來，并在changeTab函式中更新其值。
props: {
tabs: {
type: Array as PropType<Array<any>>。
required: true,
},
selectedTabId: {
型別。數字
}
},
setup(props) {
const changeTab = (selectedTab: { id: number }) => {
selectedTabId = selectedTab.id
props.tabs?.map((t) => {
t.id === selectedTab.id ? (t.current = true) : (t.current = false)
})
}
回傳 {
changeTab,
}
},
最后在計算中使用selectedTabId
computed: {
pdfSrc(): string {
return `/img/modal/pdf/${encodeURIComponent(this.tabs[this.selectedTabId].pdf)}.pdf`。
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/327395.html
標籤：
下一篇：亂數生成器列印圖案