[click here to see image 1]
https://i.sstatic.net/cfvUT.png
[click here to see image 2]
https://i.sstatic.net/ISXAU.png
Greetings, fellow beginners! Once again I find myself stuck on a coding problem. I have fetched various workout data and displayed them in my template. However, when I click on the details button, additional information is revealed for all workouts instead of just the one I clicked on. I believe I need to target the correct ID but nothing seems to be working :/
<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>
Muscle 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>