如何访问 V-for 元素

Question

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

我也有以 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-bind 但没有成功，因为所有大图像都将处于活动状态或不处于活动状态。

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"