0
114
ViewsProblem of instance v-show - Nuxt js menu
I am trying to do a simple menu for mobile, but I didn't solve a problem of instance of vue
My component nuxt Menu :
<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>
My error
·
Santiago Trujillo
1 answers
Answer question0
In order for each instance to maintain an independent copy of it's data, the data option must be a function that returns an object.
So in your code snippet, just update to:
export default {
data: () => ({
open: true,
}),
}
For more info, see data Must Be a Function in the Vue docs.
Side-note, as mentioned by Lawrence, you've got a small typo in the menu open function (ouvert --> open).
If you want to toggle the menu, you can do something like:
methods: {
menu() { // Toggle menu open state
this.open = !this.open;
},
}
·
Santiago Trujillo
Report
Answer question