(Vue.js)我想让点击图1时弹出图1，点击图2时弹出图2

Question

有几张图片。我想点击图1弹出图1，点击图2弹出图2，可以用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>

Answer 1

您可以从 items 道具构建新数据并为每个图像注入新的属性 show: false。

这样你不需要 2 v-for 循环。您可以将 Modal 组件放在第一个循环中，只使用 item.show 来显示或不显示模态。

<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 示例 here

注意：您可以将缩略图包裹在 div 中以管理点击图像。

(Vue.js)我想让点击图1时弹出图1，点击图2时弹出图2

(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

modal-dialog

popup

vue.js

v-for