无法读取未定义的属性 Nuxt.js

Question

我正在尝试根据传递给“open”变量的值在点击事件上调用 showMenu 方法。

但是我无法读取 undefined 的属性，而 open 是一个已定义的变量。

我尝试在它起作用的点击事件上控制台记录一些东西，但是每当我尝试与据我所知定义的开放变量交互时，我收到未定义的错误消息。

<template>
  <nav>
  <div class="header-one">
    <div class="header">
      <div class="logo">Logo</div>
      <div class="navigation" id="nav">
        <nuxt-link to="/">Home</nuxt-link>
        <nuxt-link to="/">About</nuxt-link>
        <nuxt-link to="/">Login</nuxt-link>
        <nuxt-link to="/">Logout</nuxt-link>
        <nuxt-link to="/">Profile</nuxt-link>
      </div>
      **<div class="burger" id="burger" @click="showMenu">**
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
    <MobileMenu v-if="this.open"/>
  </nav>
</template>

<script>
import MobileMenu from "~/components/MobileMenu";

export default {
  name: "HeaderMenu",
  MobileMenu,

data: function(){
    return{
      **open: false,**
    }
},

  methods:{
    showMenu:() =>{
      **this.open = !this.open**
    }
  }
}
</script>

Answer 1

发生这种情况是因为您的 showMenu 函数是一个箭头函数，它改变了 this 的范围。

这里this指的是功能范围而不是组件

改用经典函数

这是一个例子

new Vue({
  el: '#app',
  data: () => {
    return {
      open: false
    }
  },
  
  methods: {
    toggleOpen1(){
      this.open = !this.open
    },
    toggleOpen2: () => {
      this.open = !this.open
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>Open : {{ open }}</div>
  <button @click="toggleOpen1">Toggle open 1</button>
  <button @click="toggleOpen2">Toggle open 2</button>
</div>

如您所见，toggleOpen1（经典函数）方法有效，而 toggleOpen2（箭头函数）无效。

无法读取未定义的属性 Nuxt.js

Cannot read properties of undefined Nuxt.js

javascript

vue.js

nuxt.js