활성 항목의 스타일링(vue.js)

활성 항목의 스타일링(vue.js)

나는 vue.js를 처음 접하는 편인데, 현재 목록 그룹의 특정 항목을 스타일링하려고 하고 있다.내 애플리케이션은 메인 내비게이션, 사이드 메뉴, 메인 콘텐츠 섹션으로 구분된다.목록 그룹에서 항목을 클릭하면 클릭된 항목이 강조 표시되고 기본 내용이 변경될 수 있다.콘텐츠 변경은 잘 되지만 리스트에 있는 아이템을 스타일링하느라 힘들어.사이드 메뉴의 구성 요소 코드는 다음과 같다.

<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>

내가 아이템을 가져오는 '아이템' 어레이는 vuex 매장에 저장되어 있고 모든 것에 접속하는 것은 잘 된다.목록 그룹의 개별 항목을 "활성화"로 설정할 수 있다는 것을 알지만, 각 구성을 사용하여 배열에서 항목을 가져오는 중이므로, 내 경우 어떻게 해야 할지 알 수 없었다.나는 다음과 같은 조건부 수업을 이용하려고 했다.

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

그러나 이것은 단지 응용 프로그램을 시작할 때 항목들이 보이지 않는 결과를 낳는다.((현재)Item'은 vuex 저장소에 저장되어 있는 현재 선택된 항목의 색인이다.클래스 '항목 선택'은 항목의 일반적인 스타일링(조건 추가 전에 미세하게 작업)에 사용되며, 따라서 강조 표시에 사용하고자 했던 '활성 항목' 클래스가 하드 코딩된 참이다.

뭐 좋은 제안이라도 있어?내가 뭐 놓친 거 있어?

편집:

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;
}

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


methods: {
  selectItem(id){
    this.currentItem = id;
  }
}

참조URL: https://stackoverflow.com/questions/70077379/styling-active-item-in-a-b-list-group-vue-js