Issue with displaying content using v-show in a Nuxt.js menu

Question

Issue with displaying content using v-show in a Nuxt.js menu

Struggling to create a mobile menu with Vue instance error

The Nuxt Menu Component :

<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.open = false
            }
        },
    }
    
</script>

Error Snapshot

https://i.stack.imgur.com/IcfTP.png

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

To ensure that each instance maintains a unique copy of its data, the data option should be set to a function that returns an object.

To update your code snippet, make the following change:

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

For more detailed information, refer to data Must Be a Function in the Vue documentation.

On a side note, as pointed out by Lawrence, there is a minor typo in the menu open function (ouvert should be corrected to open). If you wish to toggle the menu, you can use the following method:

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

Answer 2

To ensure that each instance maintains a unique copy of its data, the data option should be set to a function that returns an object.

To update your code snippet, make the following change:

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

For more detailed information, refer to data Must Be a Function in the Vue documentation.

On a side note, as pointed out by Lawrence, there is a minor typo in the menu open function (ouvert should be corrected to open). If you wish to toggle the menu, you can use the following method:

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

Issue with displaying content using v-show in a Nuxt.js menu

The Nuxt Menu Component :

Error Snapshot

Answer №1

Similar questions

Utilizing Vue-chartjs and axios to create a dynamic stacked bar chart

Exploring the Power of Laravel 5.5 and Vue.js 2.x for Efficient API Calls

Storing a screen value with javascript made simple

Prevent animation when expanding the menu in Vue using CSS

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Move information from one webpage to a different page

Is there a way for me to dynamically decide whether to use the append or prepend function?

Understanding how Vue CLI v3 determines which JavaScript files should be separated into different chunks

What is the best way to navigate through multi-dimensional arrays of objects in JavaScript?

Using regular expressions to extract the value of a specific key from a JavaScript object

Unpredictable jQuery Ajax setTimeout

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

JavaScript for_each loop

Troubleshooting React: Child Component Fails to Render

What is the best way to incorporate a description box for each city on the svg map that appears when you hover your mouse over it?

Using the Flow type checker with React library results in complications

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

I'm curious if there is a method in React Native to dynamically alter the color of a button depending on a boolean value retrieved from a database source

Ways to disperse items within another item