classNameがVueJSメソッドで動作しない

Question

"link"でクラスを持つすべての要素のclassNamesを変更したいと思います。私は要素上でクリックアクションを介して呼び出されるメソッドを使用しています。私は関数から長さを取得してテストし、それはうまく動作しますが、クラスを追加することはありません。誰でも知っている理由は？

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') 

戻りますがARRA html要素のyのようなオブジェクト、および.classNameは、このオブジェクト内の各要素の属性である、多分あなたはこれを試すことができます。

代わり

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

。

Answer 2

現在のコードですべてのリンクのクラスを変更しようとしています。私が代わりにお勧めしたいです何

は次のとおりです。

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

event.currentTarget

はいつもあなたがクリックしたリンクになります。

使用すると、1つをクリックしたときにそれらはすべて「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のように思っています。理想的には、いくつかの州に基づいてこれらのクラスを変更したいと思っています。しかし、より良い答えを得るためにあなたの質問をもっと明確にする必要があります。