Question

当我进行v-for循环并且已经选择了一个类别时，我不知道如何正确选择（设置活动类别）。让我分享代码并作进一步解释

这些是我的可用订阅，并且已经根据用户数据选择了一个

<ul>
    <li v-for="(s, key, index) in subscriptions"
        :class="checkIfClassActive(s.subscription_key)"
        @click="setActive(key, index)">
        {{ s.name }}
    </li>
</ul>

和我的js代码

checkIfClassActive(userSubscriptionKey) {
    if (userSubscriptionKey === this.userSubscription.subscription_key) {
        return 'active';
    }
},
setActive(key, index) {

},

这是显示方式

现在，下一步是当我单击一个li元素时，它应该变为活动状态，而所有其他li元素应失去活动类，但是问题是我不知道如何正确编写setActive函数。您能帮我一下吗，怎么做。

如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

添加名为data的{{1}}属性：

activeIndex

和您的data() { return { activeIndex: undefined } },方法：

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);

    }
  }

您基本上设置了一个应该处于活动状态的索引，仅此而已。当列表元素的索引与<ul> <li v-for="(s, index) in subscriptions" :class="{ 'active': activeIndex === index }" :key="s.id" @click="setActive(s, index)"> {{ s.name }} </li> </ul>相同时，添加active CSS类。

关于在用户更改选项之前将activeIndex设置为现有选项，则在将订阅数据提取到用户当前的订阅时可以设置activeIndex。

提琴：http://jsfiddle.net/eywraw8t/256701/

Answer 2

每次选择标签时都更改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

checkIfClassActive(userSubscriptionKey) {
    if (userSubscriptionKey === this.userSubscription.subscription_key) {
        return 'active';
    }
},
setActive(subscription_key) {
    this.userSubscription.subscription_key=subscription_key;
},

Answer 3

显示逻辑的简单示例：

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部分：

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

See it in action

Answer 4

这很简单

如果您使用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>

如果不需要使用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>

当一个li元素在v-for循环中单击时，VueJs设置活动类

4 个答案: