Бутстрап модальный в петле в vuejs 2.0 - PullRequest
Новая
       25

Бутстрап модальный в петле в vuejs 2.0

0 голосов
/ 17 мая 2018

Я пытаюсь создать галерею изображений в vue.js, но это впервые для меня.Я использую vue-bootstrap, но я не знаю, как использовать модал, который показывает одно изображение, а не каждое изображение из массива.

Это мой код: 

<template>
  <div id="app">
<img v-b-modal.modal1 v-for="image in images" :src="image.url">

<b-modal id="modal1" title="Bootstrap-Vue">
  <img v-for="image in images" :src="image.url">
</b-modal>


<script>
export default {
  name: 'app',
  data () {
    return {
      images: [
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
      {url: require('./assets/logo.png')},
     ]
    }
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Если вы хотите показать только 1 изображение: 

<div id="app">
  <img v-b-modal.modal1 v-for="image in images" :src="image.url" @click="activeImageUrl = image.url">

  <b-modal id="modal1" title="Bootstrap-Vue">
    <img :src="activeImageUrl">
  </b-modal>
</div>

var app = new Vue({
  el: '#app',
  data: {
    images: [
{url: 'http://via.placeholder.com/350x150'},
{url: 'http://via.placeholder.com/350x160'},
{url: 'http://via.placeholder.com/350x170'},
{url: 'http://via.placeholder.com/350x180'},
{url: 'http://via.placeholder.com/350x190'}
],
    activeImageUrl: null
  },

});

Демо: https://codepen.io/ittus/pen/MGzKJo?editors=1111

0 голосов
/ 17 мая 2018

Вы можете использовать этот шаблон: 

<img v-for="image in images" :src="image.url" @click="showModal(image)">

<b-modal ref="modal1" title="Bootstrap-Vue">
  <img ref="modalImage">
</b-modal>

И этот метод: 

export default {
  name: 'app',
  data () {
    return { ... }
  },
  methods: {
    showModal(image) {
      this.$refs.modalImage.src = image.url
      this.$refs.modal1.show()
    }
  }
}
...