How to access V-for elements - vuejs2

Question

I have Large Image elements dynamically rendered using v-for
<div class="preview-pic tab-content">
<div class="tab-pane"
v-bind:class="activeClass"
:id= index
v-for="(imgLink, index) in itemSelected.itemImages"
v-bind:ref="index">
<img :src="imgLink.urlLargeImage" />
</div>
</div>
I also have Thumbnail images rendered in v-for
<li v-for="(imgLink, index) in itemSelected.itemImages">
<a #click="onImgClicked" :data-target="'#' + index" data-toggle="tab">
<img :src="imgLink.urlThumbnail" />
</a>
</li>
in my methods:
methods:{
onImgClicked: function (index) {
document.getElementById(index).className="active" // works but is it vue-way?
this.$refs.0.className = "active" // only works if i know what index of the thumbnail will be clicked
}
}
When a thumbnail image is clicked, I'd like to make it's corresponding large image to be active by setting the css class "active". I can accomplish this with document.getelementbyid, but is that the vue-way? My attempt with $refs
I also attempted using v-bind but I was unsuccessful because either all large images will be active or not active.

Answer 1

If you only want one image active at a time, add an activeImage property to your data.
data(){
return {
activeImage: null
}
}
Modify your template in this way.
<div class="preview-pic tab-content">
<div class="tab-pane"
:class="{active: imgLink === activeImage}"
:id= index
v-for="(imgLink, index) in itemSelected.itemImages"
v-bind:ref="index">
<img :src="imgLink.urlLargeImage" />
</div>
</div>
...
<li v-for="(imgLink, index) in itemSelected.itemImages">
<a #click="activeImage = imgLink"
:data-target="'#' + index" data-toggle="tab">
<img :src="imgLink.urlThumbnail" />
</a>
</li>
And get rid of your onImgClicked. Also, you will want to set activeImage to null when you don't want any image active.
Alternatively, if more than one image could be active at a time, add a boolean active property to your imgLink objects, and change your template to
:class="{active: imgLink.active}"
and
#click="imgLink.active = !imgLink.active"