無法讀取未定義的屬性 Nuxt.js

Question

我試圖根據傳遞給“打開”變量的值在單擊事件上調用 showMenu 方法。

但是我無法讀取未定義的屬性，而打開是一個已定義的變量。

我試圖在它起作用的點擊事件上控制台記錄一些東西，但是每當我嘗試與據我所知定義的開放變量交互時，我都會收到未定義的錯誤消息。

<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 function 是一個箭頭 function，它改變了this的 scope。

this指的是function的scope而不是組件

使用經典的 function 代替

這是一個例子

 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 （箭頭函數）無效。