0
321
VistasNo se pueden leer las propiedades de Nuxt.js indefinido
Estoy tratando de llamar al método showMenu en el evento de clic en función del valor pasado en la variable "abrir".
Pero no puedo leer las propiedades de undefined while, open es una variable definida.
He intentado consolar el registro de algo en los eventos de clic que funciona, pero cada vez que trato de interactuar con la variable abierta que está definida según mi leal saber y entender, aparece el mensaje de error indefinido.
<template> <nav> <div class="header-one"> <div class="header"> <div class="logo">Logo</div> <div class="navigation" id="nav"> <nuxt-link to="/">Home</nuxt-link> <nuxt-link to="/">About</nuxt-link> <nuxt-link to="/">Login</nuxt-link> <nuxt-link to="/">Logout</nuxt-link> <nuxt-link to="/">Profile</nuxt-link> </div> **<div class="burger" id="burger" @click="showMenu">** <div></div> <div></div> <div></div> </div> </div> </div> <MobileMenu v-if="this.open"/> </nav> </template> <script> import MobileMenu from "~/components/MobileMenu"; export default { name: "HeaderMenu", MobileMenu, data: function(){ return{ **open: false,** } }, methods:{ showMenu:() =>{ **this.open = !this.open** } } } </script> 
1 Respuestas
Responde la pregunta0
Esto sucede porque su función showMenu es una función de flecha que cambia el alcance de this .
Aquí this se refiere al alcance de la función en lugar de los componentes.
Utilice una función clásica en su lugar
Aquí hay un ejemplo
new Vue({ el: '#app', data: () => { return { open: false } }, methods: { toggleOpen1(){ this.open = !this.open }, toggleOpen2: () => { this.open = !this.open } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div>Open : {{ open }}</div> <button @click="toggleOpen1">Toggle open 1</button> <button @click="toggleOpen2">Toggle open 2</button> </div> Como puede ver, los toggleOpen1 (función clásica) funcionan mientras que toggleOpen2 (función de flecha) no funciona.