Vue.js：当用户单击链接时如何更改类？

Question

我正在尝试根据用户是否单击链接向元素添加类。有一个类似的问题here，但它并没有像我想要的那样工作。

我创建了一个组件，该组件具有自己的内部数据对象，该对象具有属性isShownNavigation: false。因此，当用户单击a 时，我会更改isShownNavigation: true 并希望添加我的css 类isClicked。唉，这没有发生 - 当我显示 {{isShownNavigation}} 时，isShownNavigation 在组件中保持 false 但我可以在控制台中看到单击时我的方法正在工作。

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

我正在使用来自https://github.com/vuejs-templates/pwa 的 pwa 模板。

谢谢。

Answer 1

不要使用胖箭头函数来定义你的方法、数据、计算等。当你这样做时，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>

最后，如果/当您最终在标题中包含多个链接时，您将希望有一个与每个链接关联的 clicked 属性，或者一个活动链接属性而不是一个全局 clicked 属性。