鍍金池/ 問答/HTML/ vue-cli項(xiàng)目中，有個(gè)根據(jù)數(shù)據(jù)循環(huán)生成的tab，點(diǎn)擊其中任何一個(gè)，觸發(fā)相同的

vue-cli項(xiàng)目中，有個(gè)根據(jù)數(shù)據(jù)循環(huán)生成的tab，點(diǎn)擊其中任何一個(gè)，觸發(fā)相同的事件，并切換相應(yīng)的數(shù)據(jù)？

在vue-cli項(xiàng)目中，由于不好操作DOM，給定ID不能識別。
所以被卡在了這里，需求，目前代碼如下圖：
圖片描述

圖片描述

圖片描述

tab選項(xiàng)是根據(jù)數(shù)據(jù) v-for 循環(huán)生成出來的，我用的CSS3默認(rèn)第一個(gè)是有背景這些樣式的。默認(rèn)請求的也是第一組數(shù)據(jù)，在下方展示。現(xiàn)在需求是，點(diǎn)擊其中任何一個(gè)，對應(yīng)的tab樣式就添加，之前的去掉樣式，下發(fā)展示的數(shù)據(jù)也對應(yīng)到當(dāng)然的tab，對應(yīng)代碼我打算寫在methods里面，具體實(shí)現(xiàn)該如何操作？不能操作DOM，好多東西實(shí)在蛋疼。

回答
編輯回答
骨殘心

題主還是沒有理解數(shù)據(jù)驅(qū)動(dòng)的精髓
首先v-for出來的每一個(gè)子項(xiàng)是需要一個(gè)key來保證正確渲染的

<span v-for="(item, index) in productTabs" :key="index">{{ item }}</span>

然后你要實(shí)現(xiàn)對應(yīng)tab激活，可以初始化一個(gè)變量active來保存狀態(tài)

<span>
    v-for="(item, index) in productTabs"
    :class="active === item ? 'active-class' : ''"
    :key="index"
    @click="activeTab(item)">
    {{ item }}
</span>

activeTab(item) {
    this.active = item
}

以上只是一種方案，僅供參考，當(dāng)你習(xí)慣了數(shù)據(jù)驅(qū)動(dòng)的模式，就不會(huì)再去想DOM操作了

2017年7月29日 18:29
編輯回答
離人歸

<span v-for="" @click="handleTabClick(item)">{{item}}交易區(qū)</span>


methods: {
    handleTabClick(item){
        //處理你點(diǎn)擊后的操作
    }
}
2018年5月2日 14:07