使用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和循環設置活動狀態

回答

相關問題