如何在vue js中用多个列表突出显示所选项目

您好,来自非洲,大家好,我正在使用Vue js,我呈现了多个列表,但我只想选择(突出显示)一个元素。目前,每次点击都会突出显示多个项目。希望有道理。这是下面的代码片段

HTML

<div class='list-group'>
  <a v-for='(product, idx) in adslCapped' class='list-group-item'
     v-on:click='toggleActiveIndex(idx)' 
     :class="{'active': idx == activeIndex}" >
  {{product.name}}
  </a>
</div>


<div class='list-group'>
   <a v-for='(product, idx) in fibre' class='list-group-item'
      v-on:click='toggleActiveIndex(idx)' 
      :class="{'active': idx == activeIndex}" >
   {{product.name}} 
   </a>
</div>

SCRIPT

data: {
  activeIndex: null
},
methods: {
   toggleActiveIndex: function(index){
     this.activeIndex = index
   }
}

如您所见,我有两个列表,但是当我单击第一个列表的第一项时,它将突出显示两个列表中的第一项。请注意,这些只是与我遇到的问题有关的代码片段。

评论
  • 圈圈那叉叉
    圈圈那叉叉 回复

    使用当前的应用程序结构,如果只希望在所有列表中突出显示一个项目,则可以添加另一个表示活动列表的变量。

    然后,您需要更改活动类的条件,并检查索引是否为活动索引以及列表是否为活动列表。

    希望能帮助到你!