0
128
ViewsProblema de instancia v-show - Menú Nuxt js
Estoy tratando de hacer un menú simple para dispositivos móviles, pero no resolví un problema de instancia de vue
Mi componente nuxt Menú:
<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>Mi error
·
Santiago Trujillo
1 answers
Answer question0
Para que cada instancia mantenga una copia independiente de sus datos, la opción de data debe ser una función que devuelva un objeto.
Entonces, en su fragmento de código, simplemente actualice a:
export default { data: () => ({ open: true, }), } Para obtener más información, consulte data deben ser una función en los documentos de Vue.
Nota al margen, como lo mencionó Lawrence, tiene un pequeño error tipográfico en la función de apertura del menú ( ouvert --> open ). Si desea alternar el menú, puede hacer algo como:
methods: { menu() { // Toggle menu open state this.open = !this.open; }, }
·
Santiago Trujillo
Report
Answer question