className funktioniert nicht in VueJS-Methode

Question

Ich möchte die Klassennamen aller Elemente mit der Klasse auf "Link" ändern. Ich verwende eine Methode, die über eine Klickaktion auf das Element aufgerufen wird. Ich habe ausprobiert eine Länge von der Funktion und das funktioniert gut, aber das Hinzufügen einer Klasse nicht. Wer weiß warum?

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

kehren Sie ein arra y-ähnliches Objekt von HTML-Elemente, und .className ist ein Attribut für jedes Element in diesem Objekt, vielleicht können Sie dies versuchen:

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

statt.

Answer 2

Sie versuchen, die Klasse für alle Links mit Ihrem aktuellen Code zu ändern.

Was ich würde vorschlagen, ist stattdessen:

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

event.currentTarget wird der Link geklickt immer sein.

Wenn Sie wollen, dass sie alle „hullaballoo“, wenn man klickt Sie tun können:

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

jedoch mit, dies zu tun, ist nicht von Vorteil Vue nehmen. Du denkst auch DOM wie. Im Idealfall möchten Sie diese Klassen basierend auf einem bestimmten Status ändern. Sie müssen jedoch Ihre Frage klären, um eine bessere Antwort zu erhalten.