(Vue.js) 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

问题

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

标签

Vue.js

modal-dialog

popup

v-for