如何访问V-for元素

Question

我有使用v动态呈现的大型图像元素

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

我还在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>

在我的方法中：

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

单击缩略图图像时，我希望通过设置css类" active“使其相应的大图像处于活动状态。我可以用document.getelementbyid来完成这个任务，但这就是vue-way吗？我对$refs的尝试

我也尝试使用v绑定，但失败了，因为要么所有的大图像都是活动的，要么不是活动的。

Answer 1

如果一次只希望一个图像处于活动状态，则向数据中添加一个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>

并摆脱你的onImgClicked。此外，当您不希望任何图像活动时，您将希望将activeImage设置为null。

或者，如果一次可能有多个图像处于活动状态，则向imgLink对象添加一个布尔活动属性，并将模板更改为

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

和

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