Bootstrap vuejs 2.0 中的循环模态

Question

我正在尝试在 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>

Answer 1

您可以使用此模板：

<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()
    }
  }
}

Answer 2

如果只想显示 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

Bootstrap vuejs 2.0 中的循环模态

Bootstrap modal in a loop in vuejs 2.0

gallery

bootstrap-modal

vue.js

vuejs2