实例js菜单问题

Question

我试图为手机做一个简单的菜单，但我没有解决vue实例的问题。

我的组件nuxt菜单：

<template>
    <header id="menu" class="menu-g">
        <Nuxt-link to="/"><img src="~assets/logo.svg" alt="Logo de Lucas"/></Nuxt-link>
        <div v-show="open">
          <Nuxt-link to="/projets">Projets</Nuxt-link>
          <Nuxt-link to="/articles">Articles</Nuxt-link>
          <Nuxt-link to="/a-propos">À propos</Nuxt-link>
          <Nuxt-link to="#mecrire">M'écrire</Nuxt-link>
        </div>
        <div @click="menu()">Menu</div>
    </header>
</template>

<script>
    export default {
        data: {
            open: true,
        },
        methods: {
            menu: function() {
                this.ouvert = false
            }
        },
    }
    
</script>

我的错误

​

​

Answer 1

为了使每个实例维护其数据的独立副本，data选项必须是返回对象的函数。

因此，在您的代码片段中，只需更新到：

export default {    
  data: () => ({
    open: true,   
  }),
}

有关更多信息，请参见Vue文档中的 。

附带注意，正如劳伦斯所提到的，菜单打开函数(ouvert -> open)中有一个小错误。如果要切换菜单，可以执行以下操作：

methods: {
  menu() { // Toggle menu open state
    this.open = !this.open;
  },
}