如何将图像src传递到Vue中的模态对话框（为了缩放点击的图像）？

Question

我要做的是在点击时缩放图像，这个想法是：

• 你点击图像
• width=85vw的对话框打开你刚才点击它的图像（所以图像现在几乎全屏显示）

我想不出更好的方法是在点击时“缩放”图像，而是在模态对话框中打开它（如果有更简单的方法，请告诉我）。

码：

 <v-dialog v-model="dialog" max-width="85vw" >
     <img :src="img1" alt="" width="100%" @click.stop="dialog=false">
 </v-dialog>

 <img :src="img1" width="500px"  @click.stop="dialog = true">
 <img :src="img2" width="500px"  @click.stop="dialog = true">
 <img :src="img3" width="500px"  @click.stop="dialog = true">

 export default {
     data() {
         img1: "../../src/assets/pexels-photo-373912.jpg",
         img2: "../../src/assets/pexels-photo-373912.jpg",
         img3: "../../src/assets/pexels-photo-373912.jpg"
     }
 }

问题是，它不会在对话框中打开任何单击的图像，只是在那里硬编码的图像，在这个例子中，无论你点击什么图像，它都会打开img1。

我不知道如何动态地将:src传递给对话框 - 你点击的图像的:src。

附： v-dialog是Vuetify.js库中的一个组件

---

Question:

• 这有明显更好的方法吗？
• 如果不是真的，我该如何使这个方法工作并显示我在模态对话框中单击的图像？

Answer 1

您需要一个变量来保存选择的图像。单击图像时，应将变量设置为该图像的URL。单击对话框图像时，应取消设置变量。

该对话框应显示何时设置变量并以其他方式隐藏。

为简单起见，我没有使用实际的对话框，只是一个div。看起来你会将它用于对话框的v-model，而不是使用我使用的v-if。

new Vue({
  el: '#app',
  data: {
    selectedImage: null,
    images: [
      'http://via.placeholder.com/400x300?text=image%201',
      'http://via.placeholder.com/600x400?text=image%202',
      'http://via.placeholder.com/500x500?text=image%203'
    ]
  },
  methods: {
    zoom(url) {
      console.log("Zoom", url);
      this.selectedImage = url;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-if="selectedImage" max-width="85vw">
    <img :src="selectedImage" alt="" width="100%" @click.stop="selectedImage = null">
    <hr>
  </div>

  <div v-for="url in images">
    <img :src="url" width="100px" @click="zoom(url)">
  </div>
</div>