Vue.js：如何在用戶點擊鏈接時更改課程？

我想添加一個類到一個元素，這取決於用戶是否點擊了一個鏈接。有一個類似的問題here，但它不工作，因爲我想它是。Vue.js：如何在用戶點擊鏈接時更改課程？

我創建，其具有具有這樣的特性，其isShownNavigation: false自己的內部數據對象的成分。所以當用戶點擊a我改變了isShownNavigation: true，並期望我的css類isClicked被添加。唉未發生 - isShownNavigation停留false的組件時，我也顯示，但{{isShownNavigation}}我可以在點擊時我的方法是工作控制檯中看到。

我進口我header組件的App。代碼如下。

標題組件

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

應用

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

我現在用的PWA模板從https://github.com/vuejs-templates/pwa。

謝謝。

來源

2017-06-03 zsid

你可以使用CSS'一：visited'選擇的風格，如果點擊這個鏈接（訪問）。 –

我想在不在'a'上的其他地方添加一個css類。爲了簡單起見，我使用了「a」。 – zsid

0h k然後。無論如何，你從伯特埃文斯得到你的答案 –

不要使用脂肪箭頭的功能來定義你的方法，數據，計算機等。當你這樣做，this不會被綁定到Vue公司。請嘗試

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

請參閱VueJS: why is 「this」 undefined？在這種情況下，如果你願意，你也可以真正擺脫showNavigation方法並直接在模板中設置該值。

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

最後，如果/當你結束了在你的頭以上的鏈接，你會想和每一個環節，或者一個活動鏈接屬性，而不是一個全球點擊屬性關聯的點擊屬性。

來源

2017-06-03 14:23:55 Bert

感謝它完美的作品。我有一個導航'div'，我將添加該類而不是'a'。爲簡單起見，我使用了'a'。有一個很好的答案https://forum.vuejs.org/t/how-to-make-a-component-with-menu-item-changing-css-to-active-when-clicked/3235關於如何做它如果你想添加樣式到不同的導航鏈接。這是一個有趣的方法。 – zsid

你絕對可以依靠@LinusBorg的答案:)他是Vue團隊的核心成員。他在這裏也回答問題。 – Bert

Vue.js：如何在用戶點擊鏈接時更改課程？

回答

相關問題