问题
There are several images. I want to make image 1 pop up when I click on image 1, and I want image 2 to pop up when I click on image 2. Can I solve it using the index in class?
Carousel.vue
<template>
<div v-for="(item, index) in items" :key="index">
<img :src="item.thumbnail" />
<button type="button" @click="imgClick()" :class="`img-index--${index}`">button-{{ index }}</button>
</div>
<Modal v-if="showModal" @close="showModal = false">
<div slot="body" v-for="(item, index) in items" :key="index">
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
</template>
<script>
import Modal from './Modal.vue'
export default {
props: {
items: { type: Array, default: () => [] }
},
data() {
return {
showModal: false
}
},
methods: {
imgClick() {
this.showModal = !this.showModal;
}
},
components: {
Modal: Modal
}
}
</script>
回答1:
You can build a new data from your items
prop and inject a new property show: false
for each image.
You don't need 2 v-for
loops this way. You can put the Modal
component inside the first loop and just use the item.show
to display or not the modal.
<template>
<div>
<div v-for="(item, index) in photos" :key="index">
<div @click="imgClick(item)" style="cursor:pointer;>
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="item.show = false">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
</div>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
props: {
items: { type: Array, default: () => [] }
},
data() {
return {
photos: {}
}
},
created() {
this.photos = this.items.map(item => {
return { ...item, show: false }
})
},
methods: {
imgClick(item) {
item.show = true
}
},
components: {
Modal: Modal
}
}
</script>
Fiddle example here
Note: you can wrap the thumbnail inside a div to manage the click image.
回答2:
Vue has something awesome called, Slots; which you can have a read about here. As well as slotting, we will also use something called a router-link which renders as an <a>
tag, which you can also read about here.
What I would suggest doing, is create a new component called something along the lines of ImageButton
. Inside of that component we will use what was mentioned earlier:
<template>
<router-link :to="route">
<slot name="image" />
</router-link>
</template>
<script>
export default {
name: 'ImageButton',
props: {
route: { type: [String, Object], default: '' }
}
};
</script>
Now, once we have this we will need another component for your modal - I'll leave you to figure this one out. Then once you've got the proper route going with the router-link
and the modal
you'll be able to simply call it like this in your Carousel.vue
:
<image-button v-slot:image :route="'to_your_modal'">
<img :src="'image'" />
</image-button>
Let me know if you have any other questions, the Vue docs go into much further detail which can be found here.
来源:https://stackoverflow.com/questions/58017541/vue-js-i-want-to-make-image-1-pop-up-when-i-click-on-image-1-and-i-want-image