(Vue.js) Я хочу, чтобы изображение 1 появлялось, когда я нажимаю на изображение 1, и я хочу, чтобы изображение 2 появлялось, когда я нажимаю на изображение 2

Есть несколько изображений. Я хочу, чтобы изображение 1 всплывало, когда я нажимаю на изображение 1, и я хочу, чтобы изображение 2 всплывало, когда я нажимаю на изображение 2. Могу ли я решить эту проблему с помощью индекса в классе?

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>

vue.js modal-dialog popup v-for
person zoecode    schedule 19.09.2019    source источник
comment
Добро пожаловать в S.O.! Я не уверен, что вы хотите от вашего кода ... Похоже, у вас есть массив изображений. Вы визуализируете их так: [img1][button1][img2][button2][img3][button3] и т. Д. Тогда у вас есть модальное окно. В модальном теле вы визуализируете: [img1][img2][img3] ... и т. Д. Наконец, у вас есть метод, который переключает наличие модального окна. Это своего рода запутанная установка! Вы можете объяснить, что он должен делать?   -  person Vince    schedule 19.09.2019
comment
Здесь я создал JSFiddle для вашего вопроса: jsfiddle.net/kpt8hyu1 Используйте это как отправную точку чтобы описать ваше желаемое поведение.   -  person Vince    schedule 19.09.2019
comment
@Vince Извините за отсутствие объяснений. Спасибо за ответ :) Я хотел бы разместить изображение рядом с модальной кнопкой 0 при нажатии кнопки 0. Например: ссылка (я хотел, чтобы модальное окно перемещалось при щелчке по изображению, но этого не произошло работают, когда я помещаю событие imgClick() в <img>.)   -  person zoecode    schedule 19.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете создать новые данные из вашей 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>

Пример скрипта здесь

Примечание: вы можете обернуть миниатюру внутри div, чтобы управлять изображением клика.

person Sovalina    schedule 20.09.2019