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

Excluding /build/ path from the URL in Laravel Vue 3

jQuery does not have the capability to automatically calculate Value Added Tax on form submissions

Custom component not rendering expected CSS style

Plotting only the initial and final point on Google Maps using API

Buttons in Highcharts

The compatibility between Node JS and Vue JS front-end seems to be glitchy and

Matching request parameters with a JSON object using node.js and express framework

Tips for identifying visible elements on a webpage with JavaScript

Tips for maintaining blank lines while formatting .vue documents in VScode

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

Jquery refuses to load

Adjust the size at the location of the cursor

transmit data retrieved from `getStaticProps` to other static pages in NextJS

How can you optimize the uploading time and bandwidth by a factor of 1/3 when the output of toDataURL is in base64 format?

Why am I experiencing a problem with my ajax call only working once when I submit forms that are rendered with @Html.Render

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

Is it possible to use HTML elements to trigger actions in order to display or conceal divs using JavaScript?

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

Could this be a Vue.js memory leakage issue?

Navigating a local and server environment with relative paths in a web server's multiple sites