Question

我正在尝试根据用户是否点击了链接向元素添加了一个类。有一个类似的问题here，但它没有按我希望的那样工作。

我创建了一个具有自己的内部数据对象的组件，该对象具有属性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>

我正在使用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>

最后，如果/当您在标题中结束了多个链接时，您将需要一个与每个链接相关联的已点击属性，或者一个活动的链接属性而不是一个全局点击的属性。

Vue.js：当用户点击链接时如何更改课程？

1 个答案: