所以我正在構(gòu)建一個(gè)選項(xiàng)卡組件并使用 :class 來(lái)綁定活動(dòng)類，如下所示。<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() 時(shí)設(shè)置為 tabIndex 值，并根據(jù)之后選擇的 'idx' 進(jìn)行更新。如果我們手動(dòng)單擊選項(xiàng)卡，我對(duì) b-active 類沒(méi)有問(wèn)題，但它不會(huì)綁定在 Mounted() 中分配的 tabIndex 值。這是我用來(lái)直接添加值“0”進(jìn)行測(cè)試的腳本，但仍然沒(méi)有得到任何結(jié)果。 props: { tabIndex: { type: String, default: '0' }, mounted() { this.selectedIndex = this.tabIndex }誰(shuí)能幫我？因?yàn)榭雌饋?lái)很簡(jiǎn)單，我想了兩天也沒(méi)搞明白
2 回答
白衣非少年
TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊
初始渲染idx似乎未定義。
替換這個(gè)：
:key="tabItem.idx"
有了這個(gè)：
:key="idx"
現(xiàn)在應(yīng)該可以正常工作了。
或者，您可以使用v-for類似：
v-for="tabItem in tabs"
現(xiàn)在，使用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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個(gè)贊
問(wèn)題解決了，原來(lái)是數(shù)據(jù)類型問(wèn)題，顯然tabIndex是String，selectedIndex是Number。我變了：
:class="{ 'b-active': idx === selectedIndex }"
到：
:class="{ 'b-active': idx == selectedIndex }"
成功了！
- 2 回答
- 0 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消