className이 VueJS 메서드에서 작동하지 않음

className이 VueJS 메서드에서 작동하지 않음

모든 요소의 classNames를 "link" 클래스로 변경하고 싶습니다.요소에서 클릭 동작으로 호출되는 메서드를 사용하고 있습니다.함수에서 길이를 구하는 테스트를 해봤는데, 정상적으로 동작하지만 클래스를 추가하면 동작하지 않습니다.왜 그런지 아는 사람?

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";

    }
  }
});

JSFIDLE

document.getElementsByClassName('link') 

html 요소의 배열과 같은 개체를 반환합니다..className는 이 오브젝트 내의 각 요소의 속성입니다.이것을 시험해 보겠습니다.

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

대신.

현재 코드로 모든 링크의 클래스를 변경하려고 합니다.

대신 제안하고 싶은 것은 다음과 같습니다.

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

event.currentTarget항상 클릭하신 링크가 됩니다.

하나를 클릭했을 때 모두 "hullaballoo"로 하려면 다음 작업을 수행할 수 있습니다.

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

하지만 이렇게 해야 하는 것은 Vue를 이용하는 것이 아닙니다.너무 DOM처럼 생각하시는군요.현재 상태에 따라 이러한 클래스를 변경하는 것이 이상적입니다.하지만 더 나은 답을 얻으려면 질문을 더 명확하게 해야 합니다.

수락된 답변은 문서의 모든 일치하는 요소를 반환합니다.

컴포넌트에 삽입하고 싶은 경우는, 다음과 같이 할 수 있습니다.

this.$el.getElementsByClassName('link')

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

언급URL : https://stackoverflow.com/questions/41604280/classname-not-working-in-vuejs-method