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"

如何访问V-for元素

1 个答案: