如何仅在点击的卡片上显示数据?
How do i display data only on the clicked card?
[点击前][1]
https://i.stack.imgur.com/cfvUT.png
[点击后][2]
https://i.stack.imgur.com/ISXAU.png
你好noobie又卡住了。所以我已经获取了所有这些锻炼并将它们呈现在我的模板中。单击详细信息按钮时会显示更多数据,但问题是所有按钮都被激活但我只想打开我单击的按钮。我想我需要定位正确的 id 但注意到我已经尝试过:/
<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>
每个模态的 v-if
都绑定到相同的 showModal
值。因此,它们 show/hide 基于相同的变量变化。
我会为每个组件创建一个新组件,使用它们自己的本地 showModal
变量。
我也会使用 v-show
而不是 v-if
。内容很轻,不需要从 DOM.
add/remove
//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>
[点击前][1]
https://i.stack.imgur.com/cfvUT.png
[点击后][2]
https://i.stack.imgur.com/ISXAU.png
你好noobie又卡住了。所以我已经获取了所有这些锻炼并将它们呈现在我的模板中。单击详细信息按钮时会显示更多数据,但问题是所有按钮都被激活但我只想打开我单击的按钮。我想我需要定位正确的 id 但注意到我已经尝试过:/
<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>
每个模态的 v-if
都绑定到相同的 showModal
值。因此,它们 show/hide 基于相同的变量变化。
我会为每个组件创建一个新组件,使用它们自己的本地 showModal
变量。
我也会使用 v-show
而不是 v-if
。内容很轻,不需要从 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>