当我们使用 VueJS 单击图片时，如何独立放大图片？答案

【问题标题】：How can I enlarge pictures one independent of the others when we click on it with VueJS?当我们使用 VueJS 单击图片时，如何独立放大图片？
【发布时间】：2018-08-28 14:43:25
【问题描述】：

link of my code

所以当我点击三张图片中的一张时，我希望我的照片放大。但是现在在我的代码中并非如此，当我单击三张图片中的一张时，它们会一起放大。我不知道我的代码哪里出了问题。

我也可以给你一张图片，以便更好地了解我想要获得什么。

picture the project

<script src="https://unpkg.com/vue/dist/vue.js"></script>

    <div class ="product-image">
      <img v-bind:src="image" :class="{ full: fullWidthImage }" @click="fullWidthImage = !fullWidthImage" >

      <img v-bind:src="image2" :class="{ full: fullWidthImage }" @click="fullWidthImage = !fullWidthImage" >

      <img v-bind:src="image3" :class="{ full: fullWidthImage }" @click="fullWidthImage = !fullWidthImage" >

【问题讨论】：

你的fullWidthImage var 对于所有图像都是相同的，因为它是它们父图像的一部分，这就是为什么修改它为一个修改它为所有的原因
谢谢你的帮助，你的回答很好！！

标签： javascript html css vue.js

【解决方案1】：

问题是您通过单个Boolean控制所有图片的放大。我已经修改了您的代码以使其正常工作：我已经使用v-for 将模板转换为循环，还将fullWidthImage 转换为数字，指示要放大的图像。

模板：

<div class="product-image">
  <img v-for="(image, index) in [image, image2, image3]" v-bind:src="image" :class="{ full: fullWidthImage === index }" @click="fullWidthImage = index" />
</div>

数据：

'fullWidthImage': null

Fiddle

【讨论】：