[antes de hacer clic][1]
https://i.stack.imgur.com/cfvUT.png
[después de hacer clic][2]
https://i.stack.imgur.com/ISXAU.png
Hola, noobie está atascado de nuevo. así que busqué todos estos entrenamientos y los presenté en mi plantilla. Al hacer clic en el botón de detalles, aparecen más datos, pero el problema es que todos los botones se activan, pero solo quiero abrir el que hago clic. Supongo que necesito apuntar a la identificación correcta, pero notar que lo he intentado funciona: /
<div class="wrapper"> <div class="workouts" v-for="workout in workouts" :key="workout.id"> <div class="card-item-container"> <img v-if="mens" :src="workout.male.image" /> <img v-else :src="workout.female.image" /> </div> <div class="card-item-content"> <h3>{{ workout.name }}</h3> <button @click="showModal = true">Details</button> </div> <div class="modal" v-if="showModal"> <h3> Mouscle groups: {{ workout.bodyAreas[0] }} {{ workout.bodyAreas[1] }} </h3> <b v-html="workout.transcript"> </b> <button class="close" @click="showModal = false">close</button> </div> <script> export default { components: {}, data() { return { mens: true, womens: true, showModal: false, }; }, methods: { toggleMens() { this.mens = true; this.womens = false; }, toggleWomens() { this.womens = true; this.mens = false; }, }, computed: { workouts() { return this.$store.state.workouts; }, }, async mounted() { await this.$store.dispatch("fetchWorkouts"); }, }; </script>El v-if de cada modal está vinculado al mismo valor showModal . Por lo tanto, se muestran/ocultan en función del mismo cambio de variable.
Crearía un nuevo componente para cada uno, con su propia variable showModal local.
También usaría v-show en lugar de v-if . El contenido es liviano y no es necesario agregarlo o eliminarlo del DOM.
//Parent.vue <script> import Workout from "./Workout.vue" ... components: { Workout } ... </script> <template> <div v-for="workout in workouts" ...> <Workout workout="workout" /> </div> </template> //Workout.vue <script> ... data () { return { showModal: false } }, props: { workout } ... </script> <template> <img ... /> <h2>...</h2> <button></button> <div v-show="showModal"> {{workout....}} </div> </tamplate>