Estoy tratando de aprender Vue, y todavía soy bastante nuevo en esto.
Tengo una lista renderizada. En cada elemento, tengo un botón que me gustaría mostrar/ocultar un div en ese elemento.
Intenté hacer la Representación condicional en la documentación de Vue ( https://vuejs.org/guide/essentials/conditional.html ), pero eso alterna el div oculto para cada elemento de la lista a la vez. Supongo que eso se debe a que en los datos de exportación, está devolviendo una variable, mientras que necesitaría una variable específica del elemento.
Código de plantilla:
<template> <div v-for="time in times"> <div class="grid-container"> <div class="grid-item"> <strong>Time:</strong><br> <h5>{{ time.date_time }}</h5> </div> <div class="grid-item"> <strong>Is Reserved: </strong><br> <h5>{{ time.is_reserved }}</h5> </div> <div class="grid-item"> <button @click="isVisible = !isVisible">Toggle Hidden Area</button> </div> <div class="grid-item"> <div v-if="isVisible">Hidden by Default</div> </div> </div> </div> </template>Código de secuencia de comandos:
<script> import axios from "axios"; export default { name: 'Times', props: { times: Array }, data() { return { times: [], isVisible: false } }, async created() { axios .get('http://127.0.0.1:5000/api/v1/appointments/2022/3/13') .then(response => (this.times = response.data)) }, methods: { } } </script>¿Voy por el camino correcto con esto? Cualquier consejo para que esto funcione sería genial.
¡Gracias!
Si desea que cada elemento tenga su propio accesorio isVisible , no puede usar uno global. Deberá asignar un objeto individual a cada elemento, después de obtenerlos del servidor. Ejemplo:
<script> export default { // .... created() { axios .get('http://127.0.0.1:5000/api/v1/appointments/2022/3/13') // mapping isVisible to each item, dynamically: .then(response => (this.times = response.data.map(item => ({ ...item, isvisible: false })))); } // .... } </script> <template> <div> <div v-for="(time, key) in times" :key="key"> <!-- ... --> <div class="grid-item"> <button @click="time.isVisible = !time.isVisible">Toggle Hidden Area</button> </div> <div class="grid-item"> <div v-if="time.isVisible">Hidden by Default</div> </div> </div> </div> </template>Notas:
times definidos tanto en data como en props . Debe cambiar el nombre de uno de ellos (vue debería advertirle al respecto).