如何访问V-的元素

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

<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类“交流略去”。我可以用document.getelementbyid来完成这个任务，但是这是vue方式吗？我尝试使用$ 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"