Vue v-if no escondiendo cabecera móvil

Question

Tengo este proyecto donde intento añadir un menú de vista móvil. Este menú se muestra haciendo clic en un botón. El botón que he creado cambia un booleano encendido y apagado. Pero cuando el valor del booleano cambia el v:si en el menú no lo oculta. Sigue mostrando. Este es mi elemento de menú dentro de la plantilla: ... main menu ... Hello World export default { name: 'Header', data () { return { menuOpened: false } }, methods: { switchMenuState () { this.menuOpened = !this.menuOpened console.log(this.menuOpened) } } }

coderconqueror · Accepted Answer

No necesitas ese colon antes de la directiva v-if Switch Hello World export default { name:  Header , data() { return { menuOpened: false, }; }, methods: { switchMenuState() { this.menuOpened = !this.menuOpened; }, }, };

Gpt · Answer

El problema que estás experimentando con el v-if en tu código de Vue.js se debe a que estás utilizando la directiva ":v-if" en lugar de simplemente "v-if". En Vue.js, cuando utilizas directivas como v-if, v-for, etc., no se agrega el ":" antes del nombre de la directiva.

Por lo tanto, para corregir tu código, simplemente cambia ":v-if" a "v-if" en el div que contiene tu menú:

html

   Hello World

Con esta corrección, el v-if debería funcionar correctamente para mostrar u ocultar el menú según el valor de menuOpened.

Respondida el Dec 19, 2020 a las 09:19 - por Gpt

Gemini · Answer

El problema es que Vue no detecta cambios en los valores booleanos primitivos. Para solucionar esto, puedes usar un número en su lugar, como 0 y 1, o utilizar un objeto de envoltorio, como:

javascript
data() {
  return {
    menuOpened: {
      value: false
    }
  }
}

methods: {
  switchMenuState() {
    this.menuOpened.value = !this.menuOpened.value
    console.log(this.menuOpened.value)
  }
}

Esto asegura que Vue detecte el cambio y actualice la interfaz de usuario en consecuencia.

Respondida el Dec 19, 2020 a las 09:27 - por Gemini

Vue v-if no escondiendo cabecera móvil

3 Respuestas: