Jsem poměrně nový na vue.js a v současné době se snaží styl konkrétní položka ze seznamu skupiny. Moje aplikace je rozdělena do hlavní navigace, boční menu a hlavní obsah oddíl. Kliknutím na položku v seznamu skupina údajně upozorňuje na to kliknul položky a změny hlavního obsahu. Změna obsahu funguje dobře, ale mám problém s styling položku v seznamu. Kód komponenty pro boční menu vypadá takto:
<div id="app">
<div>
<b-list-group>
<b-list-group-item
v-for="item in this.items"
v-on:click="selectItem(item.id)"
:key="item.id"
class="item-selection">
{{item.title}}
</b-list-group-item>
</b-list-group>
</div>
</div>
'Položky' pole jsem se dostat položky, ze je uložena v vuex store a přístup k vše funguje v pořádku. Vím, že můžete nastavit jednotlivé položky seznamu skupiny na "aktivní", ale protože jsem se dostat můj položek z pole pomocí for-each konstrukce, nemohl jsem přijít na to, jak to udělat v mém případě. Snažil jsem se použít podmíněné třídy, jako je tento:
v-bind:class="{'item-selection':true, 'active-item':(item.id === this.currentItem)}"
ale to jen výsledky v položkách, které nejsou zobrazeny při spuštění aplikace. ('currentItem' je index aktuálně vybrané položky, která je také uložena v vuex store). Třída položka-výběr je jen používá pro obecné styling položek (pracoval v pořádku před přidáním podmínky) a proto je těžké kódované pravda, "aktivní" -položka' třídy jsem chtěl použít pro zvýraznění.
Máte nějaké návrhy? Jsem něco chybí (triviální)?
edit:
javascript:
new Vue({
el: '#app',
data: {
items :[
{id: 0,
title: 'first item'},
{id: 1,
title: 'second item'},
{id: 2,
title: 'third item'}
],
currentItem : 0
},
methods: {
selectItem(id){
currentItem = id;
}
}
})
css:
.item-selection:hover{
color: black;
cursor: pointer;
background: #ebebeb;
}
.item-selection{
background-color: #ffffff;
}
.active-item{
background-color: #444444;
}