current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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

share|improve this question
up vote 1 down vote accepted 
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.

share|improve this answer
    
Thanks, is the a way to add the class to all those element, maybe using a forEach loop? – Clinton Green Jan 12 at 3:24
up vote 2 down vote

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.

share|improve this answer
    
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. – Clinton Green Jan 12 at 3:32
    
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 Jan 12 at 3:35
    
but you see it's kind of dumb without a rhyme or reason. – Bill Criswell Jan 12 at 3:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.