Styling aktivní položky v <b-seznam-skupina> (vue.js)

0

Otázka

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;
}
html javascript vue.js vuejs2
2021-11-23 08:11:46
1

Nejlepší odpověď

0
v-bind:class="{'item-selection':true, 'active-item': item.id === currentItem}"


methods: {
  selectItem(id){
    this.currentItem = id;
  }
}
2021-12-01 12:30:34

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................