javascript VueJs 设置活动类，当一个 li 元素在 v-for 循环中单击时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51774458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJs set active class, when one li element clicked in v-for loop
提问by Valor_
I can't figure out how to properly select (set active class) when I do v-for loop and one class is already selected. Let me share the code and with further explanation
当我执行 v-for 循环并且已经选择了一个类时，我无法弄清楚如何正确选择（设置活动类）。让我分享代码并进一步解释
These are my available subscriptions and one is already selected, based on user data
这些是我的可用订阅，并且已经根据用户数据选择了一个
<ul>
<li v-for="(s, key, index) in subscriptions"
:class="checkIfClassActive(s.subscription_key)"
@click="setActive(key, index)">
{{ s.name }}
</li>
</ul>
and my js code
和我的 js 代码
checkIfClassActive(userSubscriptionKey) {
if (userSubscriptionKey === this.userSubscription.subscription_key) {
return 'active';
}
},
setActive(key, index) {
},
And this is how is displayed
这就是显示的方式
Now the next step is when I click on one li element it should become active and all other li elements should lose active class, but the problem is that I can't figure out how to properly write setActive function. Can you please help me out, how to do this.
现在下一步是当我单击一个 li 元素时，它应该变为活动状态，所有其他 li 元素都应该失去活动类，但问题是我不知道如何正确编写 setActive 函数。你能帮我一下吗，如何做到这一点。
If you need any additional informations, let me know and I will provide. Thank you!
如果您需要任何其他信息，请告诉我，我会提供。谢谢！
回答by dziraf
Add a dataproperty called activeIndex:
添加一个data名为的属性activeIndex：
data() {
return {
activeIndex: undefined
}
},
and your setActivemethod:
和你的setActive方法：
methods: {
setActive(subscription, index) {
this.activeIndex = index;
this.userSubscription.subscription_key = subscription.subscription_key
},
getSubscriptions() {
.....
// fetch subscriptions in this.subscriptions var
.....
// select preselected subscription, when fetching subscriptions
let userSubscriptionKey = this.userSubscription.subscription_key;
let indexOfObject = this.subscriptions.findIndex(
o => o.subscription_key === userSubscriptionKey
);
this.setActive(this.userSubscription, indexOfObject);
}
}
with a slight modification to your template:
对您的模板稍作修改：
<ul>
<li v-for="(s, index) in subscriptions"
:class="{ 'active': activeIndex === index }" :key="s.id"
@click="setActive(s, index)">
{{ s.name }}
</li>
</ul>
You basically set an index that should be active and that's it. activecss class is added when list element's index is the same as activeIndex.
您基本上设置了一个应该处于活动状态的索引，就是这样。active当列表元素的索引与 .css 相同时添加 css 类activeIndex。
As for setting activeIndexto existing choice before the user changes it, you can set activeIndexwhen fetching subscriptions data to user's current subscription.
至于activeIndex在用户更改之前设置为现有选项，您可以activeIndex在获取订阅数据时设置为用户当前订阅。
回答by Helping hand
Change your this.userSubscription.subscription_keyvariable everytime a tab is selected. For this pass it through setActive(s.subscription_key)You can do something like this,
this.userSubscription.subscription_key每次选择选项卡时更改变量。为此通过它setActive(s.subscription_key)你可以做这样的事情，
<li v-for="(s, key, index) in subscriptions"
:class="checkIfClassActive(s.subscription_key)"
@click="setActive(s.subscription_key)">
{{ s.name }}
</li>
Js
JS
checkIfClassActive(userSubscriptionKey) {
if (userSubscriptionKey === this.userSubscription.subscription_key) {
return 'active';
}
},
setActive(subscription_key) {
this.userSubscription.subscription_key=subscription_key;
},
回答by roli roli
A simple example showing the logic:
一个显示逻辑的简单示例：
html part:
html部分：
<div id="app">
<ul>
<li
v-for="item in items"
:key="item.id"
:class="item.class"
@click="set_active_id(item.id)"
>{{ item.text }}</li>
</ul>
</div>
Js part:
js部分：
new Vue({
el: "#app",
data: {
items: [
{ id: 1, text: 'text1', class: 'active' }, //default active
{ id: 2, text: 'text2', class: '' },
{ id: 3, text: 'text3', class: '' }
],
previous_active_id: 1
},
methods: {
set_active_id(id) {
if (this.previous_active_id === id) return //no need to go further
this.items.find(item => item.id === this.previous_active_id).class = '' //remove the active class from old active li
this.items.find(item => item.id === id).class = 'active' //set active class to new li
this.previous_active_id = id //store the new active li id
}
}
})
回答by hilo
this is quicly
这很快
if you use v-for:
如果您使用 v-for：
<template>
<div>
<ul>
<li
class="anyThings"
v-for="cat in cats"
:key="cat.index"
@click="itemActive(cat.index)"
:class="[(itemA == cat.index) ? 'active':'']"
>{{ cat.yourObjectKey }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
itemA:'0' // for first load and in curent path
}
},
computed: {
cats() {
...
}
},
methods: {
itemActive(e) {
this.itemA = e;
}
},
}
</script>
<style>
.active {
...
}
</style>
if you don't need use v-for and use router-link in element:
如果您不需要在元素中使用 v-for 并使用 router-link：
<template>
<div>
<ul>
<li @click="itemActive($route.path)">
<router-link to="/" class="anyThings"
:class="[(itemA == '/') ? 'active':'']"
>your text
</router-link>
</li>
<li @click="itemActive($route.path)">
<router-link to="/article" class="anyThings"
:class="[(itemA == '/article') ? 'active':'']"
>your text
</router-link>
</li>
.
.
.
</ul>
</div>
</template>
<script>
export default {
data() {
return {
itemA:this.$route.path // for first load and in curent path
}
},
methods: {
itemActive(e) {
this.itemA = e;
}
},
}
</script>
<style>
.active {
...
}
</style>
