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

Discovering the import path of Node modules in ReactAlgorithm for determining the import path of

Having difficulty using the forEach() method to loop through the array generated by my API

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

Having trouble formatting an AJAX POST request properly

Passing data from child component to parent component using Vue emit

Illustrating SVG links

Invoke the callback function before executing the next function

Next.js customization script

Why is the Axios instance/function not being passed the argument?

React-Native introduces a new container powered by VirtualizedList

E/AndroidRuntime: CRITICAL ERROR: main --- java code in an android app

Unlocking Extended Functionality in JQuery Plugins

send data to a hyperlink

The jQuery ajax function functions flawlessly on a local environment, but encounters issues when used on a

Identify user input with Python Selenium for keyboard and mouse interactions

AngularJS: Unable to preserve the data

Automatically Modify Uploaded Files on the Server

What do I need to add in order to connect a controller to a form submission?

The $http.get request is successful only when the page is initially loaded for the first

Implementing conditional visibility toggling in React