实例v-show的问题 - Nuxt js menu

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 选项必须是一个 returns 对象的函数。

所以在您的代码片段中，只需更新为：

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

有关详细信息，请参阅 Vue 文档中的 data Must Be a Function。

Side-note，正如 Lawrence 所提到的，您在菜单打开功能中有一个小错字 (ouvert --> open)。如果你想切换菜单，你可以这样做：

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

实例v-show的问题 - Nuxt js menu

Problem of instance v-show - Nuxt js menu

javascript

vue.js

vuejs2

nuxt.js

我的组件 nuxt 菜单：

我的错误