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