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：如何在用户点击链接时更改课程？

回答

相关问题