className not working in VueJS method

Question

I want to change the classNames of all elements with the class on "link". I am using a method which is called via a click action on the element. I tested out getting a length from the function and that works fine but adding a class does not. Anyone know why?

HTML

<div id="app">
  <ul>
    <li><a href="#" class="link" @click="myFunc">Link text 1</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 2</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 3</a></li>
  </ul>
</div>

JS

var app = new Vue({
el: '#app',
methods: {
  myFunc: function(event){

      // works
      var ElLength = document.getElementsByClassName('link').length;
      console.log('ElLength = ' + ElLength);

      // does not work
      document.getElementsByClassName('link').className += " hullaballoo";

    }
  }
});

JSFIDDLE

Adolt · Accepted Answer · 2017-01-12 03:16:36Z

5

document.getElementsByClassName('link')

returns you an array-like object of html element, and .className is an attribute of each element in this object, maybe you can try this:

document.getElementsByClassName('link')[0].className += " hullaballoo";

instead.

answered Jan 12, 2017 at 3:16

Adolt

765 bronze badges

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

1 Comment

Clinton Green Over a year ago

Thanks, is the a way to add the class to all those element, maybe using a forEach loop?

Bill Criswell · Accepted Answer · 2017-01-12 03:38:09Z

2

You are trying to change the class on all the links with your current code.

What's I'd suggest instead is:

event.currentTarget.classList.toggle('hullaballoo');

event.currentTarget will always be the link you clicked.

If you want them all "hullaballoo" when one is clicked you can do:

<a v-for="link in 3" 
   href="#probably-actually-want-a-button"
   @click.prevent="allSelected = !allSelected"
   :class="{ hullaballoo: allSelected }">
   Link {{ link }}
</a>

However, having to do this is not taking advantage of Vue. You're thinking too DOM like. Ideally you'd want to change these classes based on some state your'e in. You'd need to clarify your question more to get a better answer, though.

edited Jan 12, 2017 at 3:38

answered Jan 12, 2017 at 3:24

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

3 Comments

Clinton Green Over a year ago

Thanks but I want all the links to change not just the currentTarget. I do know there are easier ways of accomplishing this in Vue but I'm finding Vue lacks easy ways to modify the dom. So I'm trying to gauge how I can perform tasks that are easy in jQuery but difficult in Vue. I want to use Vue in a future project and I'm hoping to replace jQuery with Vue but I think I might have to still use jQuery for dom manipulation.

Bill Criswell Over a year ago

It's a lot easier to modify the DOM with Vue since it's directly tied to data. You can do <a v-for="link in 3" @click.prevent="allSelected = !allSelected" :class="{ selected: allSelected }">Link {{ link }}</a>.

Bill Criswell Over a year ago

but you see it's kind of dumb without a rhyme or reason.

tony19 · Accepted Answer · 2022-07-15 01:40:18Z

0

The accepted answer will return all matching elements in the document.

If you just want to get those in your component, you can do like this:

this.$el.getElementsByClassName('link')

https://v2.vuejs.org/v2/api/#vm-el

edited Jul 15, 2022 at 1:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 16, 2020 at 15:39

ESP32

8,7732 gold badges46 silver badges71 bronze badges

Collectives™ on Stack Overflow

className not working in VueJS method

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related