將v-for設置爲特定索引

我對Vue很新，所以如果這是一個愚蠢的問題，請耐心等待。將v-for設置爲特定索引

我有一個大的陣列，其我輸出到屏幕作爲一種使用此代碼膜捲筒的圖片數量：

images = [ 
    {src: 'image1.jpg'}, 
    {src: 'image2.jpg'}, 
    {src: 'image3.jpg'}, 
    {src: 'image4.jpg'}, 
    {src: 'image5.jpg'}, 
    ...etc 
]; 

<div v-for="(img, index) in images" :key="index"> 
    <img :src="img.src" /> 
</div>

編輯：什麼產生是圖像的水平條。感興趣的圖像應該位於屏幕的中心，屏幕寬度允許（通常爲4或5）的任意一側顯示儘可能多的圖像。所需的索引來自代碼中的其他地方。我可以得到在v-for循環中輸出索引的值沒有問題，但我似乎無法讓它改變循環的位置。

到目前爲止，這樣的輸出以我想要的方式輸出。然而，我想要做的是當我提供合適的索引時，轉到卷軸上的特定圖像，所以我想問題是是否有可能轉到v-for循環中的特定圖像/索引編程？

任何幫助或指針正確的方向將受到感謝。

感謝

來源

2017-09-15 Drum

你的意思是「去一個特定的形象」？滾動到其位置？將這個列表從這個索引開始？ – thanksd

嗨，理想情況下我想滾動到它的位置，但我會接受在這一點上的任何行爲。 – Drum

這是一個滑塊，圖像的水平列表，一個垂直的圖像列表，一次只顯示一個圖像，你只是想將頁面滾動到圖像。如何通過輸入字段和下拉菜單等來完成選擇。我們需要方式，方式，方式來獲取更多信息，以便能夠用這個方法做任何事情。編輯 –

這很難說，你怎麼會需要從缺乏專門的代碼實現此。但是，無論你做什麼，你都可能想要使用$refs。將ref attribute放置在與v-for相同的元素上將創建對按相同順序編制索引的元素的引用數組。從那裏你可以根據你的需要設置滾動。

下面是一個例子：

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     items: [ 
 
     {text: 'a'}, 
 
     {text: 'b'}, 
 
     {text: 'c'}, 
 
     {text: 'd'}, 
 
     {text: 'e'}, 
 
     {text: 'f'}, 
 
     {text: 'g'}, 
 
     {text: 'h'}, 
 
     ] 
 
    } 
 
    }, 
 
    methods: { 
 
    scrollTo(index) { 
 
     let $item = this.$refs.item[index]; 
 
     let $container = this.$refs.container; 
 
     $container.scrollTop = $item.offsetTop; 
 
    } 
 
    } 
 
})

body { margin: 0; } 
 

 
.container { 
 
    background: #fafafa; 
 
    width: 100px; 
 
    height: 50px; 
 
    overflow-y: scroll; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <div class="container" ref="container"> 
 
    <div v-for="(item, index) in items" :key="index" ref="item"> 
 
     {{ item.text }} 
 
    </div> 
 
    </div> 
 
    
 
    <button v-for="(item, index) in items" :key="index" @click="scrollTo(index)"> 
 
    {{ item.text }} 
 
    </button> 
 
</div>

來源

2017-09-15 13:14:08 thanksd

完美！非常感謝！ – Drum

將v-for設置爲特定索引

回答

相關問題