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

Answer 1

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.