如何訪問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"