Question

我正在使用Vue制作照片库。我创建了一个名为Photo

的JS类

class Photo {
  constructor(img, name) {
    this.img = img;
    this.name = name;
  }
}

然后我将该类传递到photoGallery数组

data: {
    photoGallery: [
        new Photo(
            'img/pic-1.jpg',
            'Picture One'
        ),
        new Photo(
            'img/pic-2.jpg',
            'Picture Two'
        )
    ]
}

将数组中的所有照片输出到列表中

<ul class="gallery" id="gallery">
        <li v-for="photo in photoGallery" class="photo" 
        :style="{'backgroundImage': 'url(' + photo.img + ')'}"></li>
</ul>

我在输出的照片上面还有一个图像标签

<div class="selected-photo" id="selected-photo">
     <img src="#">
</div>

我想要的是创建一个方法，该方法获取您选择的img的{{1}}参数，然后将其推送到图片列表上方的Photo标记中。

但我不确定我该怎么做。任何帮助将不胜感激。

Answer 1

您可以再增加一个数据变量：说selectedIdx，它将包含所选图像的索引：

data: {
    photoGallery: [
        new Photo(
            'img/pic-1.jpg',
            'Picture One'
        ),
        new Photo(
            'img/pic-2.jpg',
            'Picture Two'
        )
    ],
    selectedIdx: null
}

在v-for中，您可以将此变量设置为v-on:click或@click，如下所示：

<ul class="gallery" id="gallery">
        <li v-for="(photo, idx) in photoGallery" class="photo"  @click="selectedIdx = idx"
        :style="{'backgroundImage': 'url(' + photo.img + ')'}"></li>
</ul>

现在，您可以在v-bind或img的帮助下在:标记中使用它：

<div class="selected-photo" id="selected-photo">
     <img :src="photoGallery[selectedIdx].img" >  //I am not sure which method will give you image path
</div>

VueJS：如何获取被点击的类的参数？

1 个答案: