当我们用VueJS点击图片时，我怎样才能将图片放大？

Question

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" >

Answer 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