Vue js toggle class of each individual element

Question

While there are many examples of toggling classes in Vuejs, I am yet to find one that toggles a class narrowing down the scope of the element. If I define a global variable like this:

data: {
  toggle: false
}

I will run into a problem when I have an element, like this navigation bar:

<ul class="menu">
  <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle">
    Foo
    <ul class="dropdown">
      <li>Dropdown Item 1</li>
      <li>Dropdown Item 2</li>
    </ul>
  </li>
  <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle">
    Bar
    <ul class="dropdown">
      <li>Dropdown Item 1</li>
      <li>Dropdown Item 2</li>
    </ul>
  </li>
</ul>

See what happens here? If I click in one of these two elements, both are going to toggle the class at the same time, because it's changing a global variable. Now, how would I toggle the class of only the element that is clicked?

Each list item should be a child component, then it can store its own toggle state :) — Terry
– Terry, Commented Aug 15, 2017 at 16:21
It would be insanely inconvenient if this is a functionality that needs to be repeated across a large Web site. — harrypujols
– harrypujols, Commented Aug 15, 2017 at 16:22
@SLaks I concur, but seems to me a little over engineering for something that shouldn't be so complicated. — harrypujols
– harrypujols, Commented Aug 15, 2017 at 16:30

harrypujols · Accepted Answer · 2017-08-15 18:10:02Z

11

It boggles my mind that something so simple requires so much code using modern frameworks, and it's a reason why JavaScript development is becoming so complex. I resorted to using a plain-old JavaScript listener to solve the matter.

<li class="has-dropdown" @click="toggle">
    ...
</li>

...

methods: {
 toggle: function( event ) {
   event.target.classList.toggle('is-open')
 }
}

...

answered Aug 15, 2017 at 18:10

harrypujols

2,2843 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

harrypujols Over a year ago

In the next few days, I'll accept the most voted of my peers' answer since mine is not a true "Vue js" answer.

Bert Over a year ago

This could still have two open at once no?

harrypujols Over a year ago

No @Bert it only toggles the class of the element clicked. This no longer uses "toggle" in data.

Bert Over a year ago

I understand, but if one has the class is-open and I click on a different li that also has @click="toggle" then I could have two lis with is-open.

harrypujols Over a year ago

Yes, you would have to click on each one you want to toggle the class to, that's the point.

|

SLaks · Accepted Answer · 2017-08-15 16:22:05Z

7

The fundamental guiding principle of VueJS (and most other modern web frameworks) is that everything comes from the model.

You never talk about manipulating the DOM; instead, you make a model that describes the effect you want.

In your case, that means you want two data properties, not one.

However, what you should actually do is make each list item its own child component (which will then get its own model). Use slots to specify different content in each one.

answered Aug 15, 2017 at 16:22

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Bert · Accepted Answer · 2017-08-16 02:06:46Z

This is just a small example of what @SLaks mentioned in his answer. Essentially turn the list elements into their own components so they can have their own state.

Vue.component("clicktoggle", {
  template:`<li :class="{ 'is-open': toggle }" @click="toggle = !toggle"><slot></slot></li>`,
  data() {return {toggle: false}}
})

And here is how it's used.

console.clear()

Vue.component("clicktoggle", {
  template:`<li :class="{ 'is-open': toggle }" @click="toggle = !toggle"><slot></slot></li>`,
  data() {return {toggle: false}}
})

new Vue({
  el:"#app"
})

.has-dropdown {
  cursor: pointer;
}
.has-dropdown:not(.is-open) ul {
  display: none
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <ul class="menu">
    <li class="has-dropdown" is="clicktoggle">
      Foo
      <ul class="dropdown">
        <li>Dropdown Item 1</li>
        <li>Dropdown Item 2</li>
      </ul>
    </li>
    <clicktoggle class="has-dropdown">
      Bar
      <ul class="dropdown">
        <li>Dropdown Item 1</li>
        <li>Dropdown Item 2</li>
      </ul>
    </clicktoggle>
  </ul>
</div>

Vue makes it incredibly simple to knock out little components like this. One quick possible enhancement would be to add a property to specify what class you wanted to toggle.

Daniel · Accepted Answer · 2017-08-15 16:40:10Z

2

the way I handle this is not to use a boolean but a an index (numeric or otherwise). Check if toggle === index and on click set toggle to index or to -1

here is a working version using string value as toggle

https://jsfiddle.net/dnqp2nc9/1/

new Vue({
  el: '#app',
  data: {
		toggle: null
  }
})

.has-dropdown li{
  opacity: 0.2;
}
.is-open li{
  opacity: 1;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{toggle}}
  <ul class="menu">
    <li class="has-dropdown" v-bind:class="{ 'is-open': toggle === 'foo' }" @click="toggle = toggle !== 'foo' ? 'foo' : null">
      Foo [{{toggle === 'foo' ? 'open' : 'closed'}}]
      <ul class="dropdown">
        <li>Dropdown Item 1</li>
        <li>Dropdown Item 2</li>
      </ul>
    </li>
    <li class="has-dropdown" v-bind:class="{ 'is-open': toggle === 'bar' }" @click="toggle = toggle !== 'bar' ? 'bar' : null">
      Bar [{{toggle === 'bar' ? 'open' : 'closed'}}]
      <ul class="dropdown">
        <li>Dropdown Item 1</li>
        <li>Dropdown Item 2</li>
      </ul>
    </li>
  </ul>
</div>

to open/close multiple, here is a array version https://jsfiddle.net/hLm82x1d/1/

new Vue({
  el: '#app',
  data: {
		toggle: []
  },
  methods: {
  	toggleItem: function (key) {
    	var i = this.toggle.indexOf(key)
    	if (i < 0) {
      	this.toggle.push(key)
      } else {
      	this.toggle.splice(i, 1)
      }
    }
  }
})

.has-dropdown li{
  opacity: 0.2;
}
.is-open li{
  opacity: 1;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{toggle}}
  <ul class="menu">
    <li class="has-dropdown" v-bind:class="{ 'is-open': toggle.indexOf('foo') >= 0 }" @click="toggleItem('foo')">
      Foo [{{toggle === 'foo' ? 'open' : 'closed'}}]
      <ul class="dropdown">
        <li>Dropdown Item 1</li>
        <li>Dropdown Item 2</li>
      </ul>
    </li>
    <li class="has-dropdown" v-bind:class="{ 'is-open': toggle.indexOf('bar') >= 0 }" @click="toggleItem('bar')">
      Bar [{{toggle === 'bar' ? 'open' : 'closed'}}]
      <ul class="dropdown">
        <li>Dropdown Item 1</li>
        <li>Dropdown Item 2</li>
      </ul>
    </li>
  </ul>
</div>

edited Aug 15, 2017 at 16:40

answered Aug 15, 2017 at 16:23

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

5 Comments

SLaks Over a year ago

You're assuming that he doesn't want both to be able to open at once.

harrypujols Over a year ago

In the question sample both already open at once, so the assumption is correct. The point is opening one at a time.

Daniel Over a year ago

yes, in the case of mulitple, can be set to add and remove index from an array

Terry Over a year ago

@harrypujols If you want to open one at a time, simply store the index of the one that is opened in data. You don't need to store the states of all the items then.

Daniel Over a year ago

I've updated the answer to include some code, just know that this is to illustrate the concept, there are ways to implement this using better practices (such as using computed values and methods)

atazmin · Accepted Answer · 2020-09-22 04:17:48Z

This seem to have worked for me (Nuxt and Bootstrap 5), idea was to have dropdown as child component that toggles via data, this is still work in progress but it seem to work, I am learning Js and Vue as I go so this might not be the best way to do it.

ThePrimary.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <nuxt-link class="navbar-brand" to="/">Navbar</nuxt-link>
      <button
        @click="isNavbarCollapsed = !isNavbarCollapsed"
        ref="navbar-toggler"
        :aria-expanded="[!isNavbarCollapsed ? 'true' : 'false']"
        :class="{ collapsed: isNavbarCollapsed}"
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div 
        :class="{ show: !isNavbarCollapsed}"
        class="collapse navbar-collapse" 
        id="navbarNavDropdown"
      >
        <NavbarNav :items="loadedPrimaryMenu" />
      </div>
    </div>
  </nav>
</template>

<script>
import NavbarNav from '@/components/Navigation/ThePrimary/NavbarNav'

export default {
  name: 'TheNavigationPrimary',
  data() {
    return {
      isNavbarCollapsed: true
    }
  },
  computed: {
    loadedPrimaryMenu() {
      return this.$store.getters.loadedPrimaryMenu
    }
  },
  components: {
    NavbarNav
  }
}
</script>

<style scoped lang="scss">


</style>

NavbarNav.vue

 <template>
  <ul class="navbar-nav">
    <li
      v-for="item in items"
      :key="item.id"
      class="nav-item"
      :class="{ dropdown: hasChildren(item.children) }"
    >
      <NavLink
        v-if="!hasChildren(item.children)" 
        :attributes="item"
      />
      <NavbarNavDropdownMenu
        v-else
        :item="item"
      />
    </li>
  </ul>
</template>

<script>
import NavbarNavDropdownMenu from "@/components/Navigation/ThePrimary/NavbarNavDropdownMenu";
import NavLink from '@/components/Navigation/NavLink';

export default {
  name: "NavbarNav",
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
    };
  },
  methods: {
    hasChildren(item) {
      return item.length > 0 ? true : false;
    },
  },
  components: {
    NavbarNavDropdownMenu,
    NavLink
  }
};
</script>

<style scoped lang="scss">

</style>

NavbarNavDropdownMenu.vue

<template>
  <span v-if="item">
    <nuxt-link
      to="#"
      @click.prevent.native="openDropdownMenu"
      v-click-outside="closeDropdownMenu"
      :title="item.title"
      :class="[
        item.cssClasses, 
        { show: isDropdownMenuVisible }
      ]"
      :id="`navbarDropdownMenuLink-${item.id}`"
      :aria-expanded="[isDropdownMenuVisible ? true : false]"
      class="nav-link dropdown-toggle"
      aria-current="page"
      role="button"
      data-toggle="dropdown"
    >
      {{ item.label }}
    </nuxt-link>
    <ul
      :class="{ show: isDropdownMenuVisible }"
      :aria-labelledby="`navbarDropdownMenuLink-${item.id}`"
      class="dropdown-menu"
    >
      <li v-for="item in item.children" :key="item.id">
        <NavLink
          :attributes="item"
          class="dropdown-item"
        />
      </li>
    </ul>
  </span>
</template>

<script>
import NavLink from '@/components/Navigation/NavLink';

export default {
  name: "DropdownMenu",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isDropdownMenuVisible: false,
    };
  },
  methods: {
    openDropdownMenu() {
      this.isDropdownMenuVisible = !this.isDropdownMenuVisible;
    },

    closeDropdownMenu() {
        this.isDropdownMenuVisible = false;
    }
  },
  components: {
    NavLink
  }
};
</script>

<style scoped lang="scss">

</style>

NavLink.vue

 <template>
  <component
    v-bind="linkProps(attributes.path)"
    :is="attributes"  
    :title="attributes.title"
    :class="[ attributes.cssClasses ]"
    class="nav-link active"
    aria-current="page"
    prefetch
  >
  {{ attributes.label }}
  </component>
</template>

<script>
export default {
  name: 'NavLink',
  props: {
    attributes: {
      type: Object,
      required: true
    }
  },
  methods: {
    linkProps (path) {
      if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') {
        return {
          is: 'a',
          href: path,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        is: 'nuxt-link',
        to: path
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>

To close dropdown on click outside

import Vue from 'vue'

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
});

Collectives™ on Stack Overflow

Vue js toggle class of each individual element

5 Answers 5

6 Comments

Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related