所以我正在構建一個選項卡組件并使用 :class 來綁定活動類，如下所示。<nav class="tabs__header" > <ul> <li> <a ref="tabItems" v-for="(tabItem, idx) in tabs" :key="tabItem.idx" :class="{ 'b-active': idx === selectedIndex }" @click="changeTab(idx)"> <span v-if="icon"> {{ tabIcon }} </span> {{ tabItem.name }} </a> </li> </ul></nav>selectedIndex 在第一次 Mounted() 時設置為 tabIndex 值，并根據之后選擇的 'idx' 進行更新。如果我們手動單擊選項卡，我對 b-active 類沒有問題，但它不會綁定在 Mounted() 中分配的 tabIndex 值。這是我用來直接添加值“0”進行測試的腳本，但仍然沒有得到任何結果。 props: { tabIndex: { type: String, default: '0' }, mounted() { this.selectedIndex = this.tabIndex }誰能幫我？因為看起來很簡單，我想了兩天也沒搞明白
2 回答
白衣非少年
TA貢獻1155條經驗 獲得超0個贊
初始渲染idx似乎未定義。
替換這個：
:key="tabItem.idx"
有了這個：
:key="idx"
現在應該可以正常工作了。
或者，您可以使用v-for類似：
v-for="tabItem in tabs"
現在，使用tabItem.idx就像在其他類似tabItem.name.
所以，這是您更新的代碼：
<nav class="tabs__header" >
<ul>
<li>
<a
ref="tabItems"
v-for="tabItem in tabs"
:key="tabItem.idx"
:class="{ 'b-active': tabItem.idx == selectedIndex }"
@click="changeTab(idx)">
<span v-if="icon"> {{ tabItem.icon }} </span>
{{ tabItem.name }}
</a>
</li>
</ul>
</nav>
烙印99
TA貢獻1829條經驗 獲得超13個贊
問題解決了，原來是數據類型問題，顯然tabIndex是String，selectedIndex是Number。我變了：
:class="{ 'b-active': idx === selectedIndex }"
到：
:class="{ 'b-active': idx == selectedIndex }"
成功了！
- 2 回答
- 0 關注
- 186 瀏覽
添加回答
舉報
0/150
提交
取消