VueJS: Wie kann ich den Parameter der Klasse erhalten, auf die geklickt wurde?

Question

Ich mache eine Fotogalerie mit Vue. Ich habe eine JS-Klasse namens Photo

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

ich vorbei dann diese Klasse in eine Fotogalerie Array

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

und Ausgeben alle Fotos in der Anordnung in eine Liste

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

Ich habe auch eine Bildmarke über den ausgegebenen Fotos

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

Was ich will, ist eine Methode, die den img Parameter der Photo Sie ausgewählt, und schiebt es in den img Tag über der Liste der Bilder.

Aber ich bin mir nicht sicher, wie ich das machen würde. Jede Hilfe würde sehr geschätzt werden.

Answer 1

können Sie haben eine weitere Datenvariable: sagen selectedIdx, die den Index des ausgewählten Bildes erhalten wird:

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

Und in der v-for Sie diese Variable mit v-on:click oder @click kurz einstellen können wie folgt vor:

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

Jetzt mit diesem können Sie es in img-Tag mit Hilfe von v-bind verwenden oder mit : kurz:

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