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

我有一个Vue中的字符串列表，我使用v-for在“list-group”中使用Bootstrap列出了它们。我想在点击其中一个项目时设置“活动”状态，但是我找不到使用for循环在列表中标识特定项目的方法。使用Vue JS和循环设置活动状态

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' } 
})

来源

2017-07-24 user8356202

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

在您的视图模型的定义补充一点：

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

修改标签在你的模板：

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

来源

2017-07-24 08:00:03

谢谢！问题是我需要在标签本身中使用它，例如，主要目标是使用一些onclick函数将“class”元素更改为“list-group-item积极“ – user8356202

你应该使用vue的方法模型。定义一个方法并通过@click绑定索引。我会在我的答案中提供一个例子。 –

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

回答

相关问题