How do i display data only on the clicked card?

user_18736327 0
Viewed 283

[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 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>

vuex vue.js javascript
1 Answers

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>
user_33309810
Related