1

let app = new Vue({
    el: '#app',
    data: {
        Texto: 'Click para mostrar',
        mostrar: 'true',
    },
    methods: {
        boton: function () {
            if(this.mostrar == true)
                this.mostrar = false
            else
                this.mostrar = true
        }
        
    },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
    <div id="app">
        <button @click='boton'>{{Texto}}</button>
        
        <ul v-show="mostrar">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
        


    </div>
    <script src="../JS/script.js"></script>
</body>
</html>

Porque la primera vez que le das click, no funciona? Existe alguna forma de arreglarlo?

He comprobado que cuando el navegador ejecuta el if por algún motivo que desconozco la primera vez que lo ejecuta no detecta el objeto this.mostrar

1 respuesta 1

0

La primera vez que das clic al botón no funciona porque el tipo de dato de la variable mostrar es string, por lo que cuando se hace la evaluación if(this.mostrar==true) esta resulta ser falsa. Entonces, la variable mostrar debería ser de tipo booleano:

 data: {
        Texto: 'Click para mostrar',
        mostrar: true,
    }

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.