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

Posted 2023-02-22

【中文标题】使用 Vue JS 和 for 循环设置活动状态

【英文标题】：Setting an active state with Vue JS and for loop

【发布时间】：2017-12-29 16:56:52

【问题描述】：

我在 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' 
)

【参考方案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)">

【讨论】：

谢谢！问题是我需要像 一样在标签本身中使用它，主要目标是有一些 onclick 功能将“class”元素更改为“list-group-item活跃”

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