Vue.js: Wie kann man eine Klasse ändern, wenn ein Benutzer auf einen Link geklickt hat?

Question

Ich versuche, einem Element eine Klasse hinzuzufügen, abhängig davon, ob der Benutzer auf einen Link geklickt hat. Es gibt eine ähnliche Frage here, aber es funktioniert nicht, wie ich es wollte.

Ich habe eine Komponente erstellt, die ein eigenes internes Datenobjekt mit der Eigenschaft isShownNavigation: false hat. Wenn also ein Benutzer auf a klickt, ändere ich isShownNavigation: true und erwarte, dass meine CSS-Klasse isClicked hinzugefügt wird. Leider passiert das nicht - isShownNavigation bleibt false in der Komponente, als ich es {{isShownNavigation}} angezeigt habe, aber ich kann in der Konsole sehen, dass meine Methode funktioniert, wenn geklickt wird.

Ich importierte meine header Komponente zu App. Code ist unten.

Header-Komponente

<template> 
<header class="header"> 
    <a 
    href="#" 
    v-bind:class="{isClicked: isShowNavigation}" 
    v-on:click="showNavigation"> 
    Click 
    </a> 
</header> 
</template> 

<script> 
export default { 
    name: 'header-component', 
    methods: { 
    showNavigation:() => { 
     this.isShowNavigation = !this.isShowNavigation 
    } 
    }, 
    data:() => { 
    return { 
     isShowNavigation: false 
    } 
    } 
} 
</script> 

Anwendung

<template> 
    <div id="app"> 
    <header-component></header-component> 
    </div> 
</template> 

<script> 
import HeaderComponent from './components/Header.vue' 
export default { 
    name: 'app', 
    components: { 
    'header-component': HeaderComponent 
    } 
} 
</script> 

ich von https://github.com/vuejs-templates/pwa die PWA-Vorlage verwenden.

Danke.

Answer 1

Verwenden Sie keine Fettpfeilfunktionen, um Ihre Methoden, Daten, Berechnungen usw. zu definieren. Wenn Sie dies tun, ist this nicht an den Vue gebunden. Versuchen

export default { 
    name: 'header-component', 
    methods: { 
    showNavigation(){ 
     this.isShowNavigation = !this.isShowNavigation 
    } 
    }, 
    data(){ 
    return { 
     isShowNavigation: false 
    } 
    } 
} 

Siehe VueJS: why is “this” undefined? In diesem Fall können Sie auch wirklich die showNavigation-Methode loswerden und diesen Wert direkt in Ihrer Vorlage festlegen, wenn Sie das möchten.

<a 
    href="#" 
    v-bind:class="{isClicked: isShowNavigation}" 
    v-on:click="isShowNavigation = true"> 
    Click 
</a> 

Schließlich, wenn/wenn Sie mit mehr als einem Link in Ihrem Header am Ende, werden Sie eine geklickt Eigenschaft mit jeder Verbindung zugeordnet haben, oder eine aktive Link-Eigenschaft statt einer globalen geklickt Eigenschaft.