使用 Vue JS 和 for 循环设置活动状态

Question

我在 Vue 中有一个字符串列表，我正在使用 v-for 通过 Bootstrap 在“列表组”中列出所有字符串。我想在单击其中一个项目时设置“活动”状态，但我找不到使用 for 循环标识列表中特定项目的方法。

HTML -

<div class="list-group" id="ServersList">
<a href="#" class="list-group-item" v-for="Server in Servers">{{Server.text}}</a>
</div> 

VueJS -

var ServersList = new Vue({
    el: '#ServersList',
    data: {
        Servers: [
            { text: '1' },
            { text: '2' },
            { text: '3' },
            { text: '4' },
            { text: '5' },
            { text: '6' }
})

Answer 1

您可以使用v-for="(Server, index) in Servers"。 Index 将存储每个元素的当前索引。有了这个，你就可以像这样调用一个定义的方法：

在您的视图模型定义中添加：

data: {
  currentIndex: 0
},
methods: {
  myClick(index) {
    this.currentIndex = index
  }
}

修改模板中的 a 标签：

<a href="#" 
  v-for="(server, index) in Servers" 
  :class="{yourActiveClass: currentIndex === index, yourInactiveClass: currentIndex !== index}" 
  @click="myClick(index)">