[before click][1]

https://i.stack.imgur.com/cfvUT.png

[after click ][2]

https://i.stack.imgur.com/ISXAU.png

Hello noobie is stuck again. so i've fetched all these workouts and rendered them in my template. When clicking on the details button more data shows up but the problem is that all buttons get activated but i only want to open the one i click on. I guess i need to target the right id but noting i have tried works :/

    <div >
      <div  v-for="workout in workouts" :key="workout.id">
        <div >
          <img v-if="mens" :src="workout.male.image" />
          <img v-else :src="workout.female.image" />
        </div>
        <div >
          <h3>{{ workout.name }}</h3>
          <button @click="showModal = true">Details</button>
        </div>
 
        <div  v-if="showModal">
          <h3>
            Mouscle groups: {{ workout.bodyAreas[0] }}
            {{ workout.bodyAreas[1] }}
          </h3>
          <b v-html="workout.transcript"> </b>
          <button  @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>

CodePudding user response：

Every modal's v-if is bound to the same showModal value. Hence they show/hide based on the same variable change.

I would create a new component for each, with their own local showModal variable.

I would also use v-show instead of v-if. The content is light weight and there is no need to add/remove it from the 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>