Applying an active class in VueJs to a specific li element within a v-for loop when clicked

Question

Applying an active class in VueJs to a specific li element within a v-for loop when clicked

Struggling to select (set active class) in a v-for loop when one class is already selected. Here's the code and an explanation:

These are my available subscriptions, with one 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>

JS code snippet:

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

},

Displayed image: https://i.stack.imgur.com/fLZWt.png

My dilemma lies in properly implementing the setActive function - upon clicking a li element, it should become active while all others lose the active class. Can you assist me in solving this issue?

If more information is needed, please let me know. Thank you!

javascript vue.js vuejs2

Answer 1

Answer №1

Include a new property in your code named activeIndex:

  data() {
    return {
      activeIndex: undefined
    }
  },

Also, implement the setActive method:

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

    }
  }

Make some changes to your template as well:

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

The idea is to specify which index should be considered active by setting the activeIndex property. The active CSS class will be applied to the list element with an index matching the activeIndex.

If you want to set activeIndex to the existing choice before the user makes any changes, you can do so by assigning the current subscription of the user to activeIndex while fetching subscription data.

See it in action here: http://jsfiddle.net/eywraw8t/256701/

Answer 2

Include a new property in your code named activeIndex:

  data() {
    return {
      activeIndex: undefined
    }
  },

Also, implement the setActive method:

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

    }
  }

Make some changes to your template as well:

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

The idea is to specify which index should be considered active by setting the activeIndex property. The active CSS class will be applied to the list element with an index matching the activeIndex.

If you want to set activeIndex to the existing choice before the user makes any changes, you can do so by assigning the current subscription of the user to activeIndex while fetching subscription data.

See it in action here: http://jsfiddle.net/eywraw8t/256701/

Answer 3

Answer №2

Update the

this.userSubscription.subscription_key

variable each time a tab is selected. Use setActive(s.subscription_key) to achieve this functionality. Here's an example of how you can implement it:

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

JavaScript:

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

Answer 4

Update the

this.userSubscription.subscription_key

variable each time a tab is selected. Use setActive(s.subscription_key) to achieve this functionality. Here's an example of how you can implement it:

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

JavaScript:

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

Answer 5

Answer №3

Here is a basic example demonstrating the process:

Example of HTML code:

<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 logic section:

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 proceed further
      this.items.find(item => item.id === this.previous_active_id).class = '' //deactivate the previously active list item
      this.items.find(item => item.id === id).class = 'active' //activate the new list item
      this.previous_active_id = id //update the ID of the newly active list item
    }
  }
})

View it live

Answer 6

Here is a basic example demonstrating the process:

Example of HTML code:

<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 logic section:

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 proceed further
      this.items.find(item => item.id === this.previous_active_id).class = '' //deactivate the previously active list item
      this.items.find(item => item.id === id).class = 'active' //activate the new list item
      this.previous_active_id = id //update the ID of the newly active list item
    }
  }
})

View it live

Answer 7

Answer №4

this is a quick example

when utilizing 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 initial load and current path
                        }
                    },
                    computed: {
                        cats() {
                            ...
                        }
                    },
                    methods: {
                        itemActive(e) {
                            this.itemA = e;
                        }
                    },

                }
            </script>

            <style>
                .active {
                    ...
                }
            </style>

if you do not require v-for and want to use router-link within an element:

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

Answer 8

this is a quick example

when utilizing 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 initial load and current path
                        }
                    },
                    computed: {
                        cats() {
                            ...
                        }
                    },
                    methods: {
                        itemActive(e) {
                            this.itemA = e;
                        }
                    },

                }
            </script>

            <style>
                .active {
                    ...
                }
            </style>

if you do not require v-for and want to use router-link within an element:

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

Answer 9

Answer №5

If you're facing this issue, a simple solution would be to replace the "li" tags with "router-link", and then adjust the default styling of the router-link. In particular, focus on the "router-link-active" class.

<ul>
   <router-link v-for="item in items"
     :key="item.id"
     :to="item.route"
    >
        {{ s.name }}
      </router-link>
   </ul>


 <style>
   .router-link-active{
     ...
   }
 </style>

Answer 10

If you're facing this issue, a simple solution would be to replace the "li" tags with "router-link", and then adjust the default styling of the router-link. In particular, focus on the "router-link-active" class.

<ul>
   <router-link v-for="item in items"
     :key="item.id"
     :to="item.route"
    >
        {{ s.name }}
      </router-link>
   </ul>


 <style>
   .router-link-active{
     ...
   }
 </style>

Applying an active class in VueJs to a specific li element within a v-for loop when clicked

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Show only specific data from JSON results

Ensuring consistent placement and scrollability of two divs across all screen sizes

What is the process for sending a message from the internet to a mobile device?

What is causing the ajax code to malfunction?

Steps for importing JQuery into a custom DNN module

Guide on decrypting a file encrypted with C# using Node JS

Form submission requires a checkbox to be checked

What is the best way to pre-fetch data using axios in Vue?

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

sending functions into angular as opposed to using 'function()'

Tips on allowing the backend file (app.js) to handle any URL sent from the frontend

"Trouble with kendo drop-down list: onclick event not triggering when text is changed

What is the best way to display a progress bar as a percentage?

`How can I activate caching for getServerSideProps in Next.js?`

Encountering a CORS policy issue while attempting to retrieve data from an API

Learn how to insert JavaScript code into the head of an iframe using jQuery

Developing a Vue.js API integration

Experiencing challenges during the creation of a NUXT build

I am looking to modify various attributes linked to Rails

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript