javascript - 当我们用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