Soy nuevo en vue js. Quiero mostrar elementos ocultos al hacer clic. Entonces, lo que puedo hacer: crear una propiedad en un objeto de datos como
isHidden: falsey agrega un método como
showHide(){ return this.isHidden = !this.isHidden; }Y vincule el método showHide en el evento de clic como
<li @click="showHide">Some text</a>Pero el problema es que si hay varios elementos de la lista que vinculan el mismo evento de clic, todas las listas se mostrarán al hacer clic o todas se ocultarán. Pero quiero que el elemento de destino solo se muestre u oculte al hacer clic.
¿Cómo puedo hacer esto, por favor?
Puede usar algunos datos para determinar qué elemento desea mostrar/ocultar. Por ejemplo: id, índice de cada elemento
<button v-for="(i, ind) in listElement" @click="toggleElement(ind)" :key="ind"> Toggle {{ i }} </button> <p v-for="(i, ind) in listElementShow" :key="ind"> Element: {{ i }} </p>Lógica:
data() { return { listElement: [ { name: 1, isShow: true}, { name: 2, isShow: true}], } }, computed: { listElementShow() { return this.listElement.filter(e => e.isShow); } } methods: { toggleElement(index) { this.listElement[index].isShow = !this.listElement[index].isShow; } }Puedes hacer algo como esto:
<template> <ul class="list-with-hidden-items"> <li v-for="item in list" :key="item.id" @click="showHide(item.id)" > {{ item.text }} </li> </ul> </template> <script> export default { data: () => ({ hidden: {} }), methods: { showHide(id) { this.$set(this.hidden, id, !this.hidden[id]); } } } </script>y luego puede renderizar donde desea que se muestre su elemento de esta manera:
<div v-if="!this.hidden.item1">I am shown because of item1 is not hidden</div>Puede usar un classObject enlazado dinámicamente para hacer tal cosa. Ver enlaces de clase y estilo
<template> <div @click="showHide()" :class="{ isHidden: isHidden }"> <p>This is a thing</p> </div> </template> <script> export default { name: "HelloWorld", data() { return { isHidden: false, }; }, methods: { showHide() { this.isHidden = !this.isHidden; }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .isHidden { background-color: grey; } div { background-color: #fff; } </style>