Vuejs2 如何访问V-for元素

我使用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>

单击缩略图时，我希望通过将css类设置为“active”，使其对应的大图像处于活动状态。我可以用document.getelementbyid完成这项工作，但这是vue的方式吗？我的$refs尝试

---

我还尝试使用v-bind，但未成功，因为所有大图像都将处于活动状态或不处于活动状态。

如果一次只希望一个图像处于活动状态，请在数据中添加

activeImage

属性

data(){
    return {
        activeImage: null
    }
}

以这种方式修改模板

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

及

data(){
    return {
        activeImage: null
    }
}

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

:class="{active: imgLink.active}"

@click="imgLink.active = !imgLink.active"