javascript - className not working in VueJS method - Stack Overflow

admin管理员组

文章数量:1277896

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

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

• javascript
• vuejs2
• vue.js

Share Improve this question Follow asked Jan 12, 2017 at 2:43 Clinton GreenClinton Green 9,9772323 gold badges7272 silver badges109109 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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

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

this.$el.getElementsByClassName('link')

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

本文标签： javascriptclassName not working in VueJS methodStack Overflow