[英]Vue.js v-for add to :index + “1”
我需要在 v-for 渲染列表中添加每個索引詞 +1。 例如第一個列表 index0,第二個 index1,第三個 index2...在我的選項 imageIndex 是我需要添加到每個索引的字符串
這有可能嗎? 或者我如何為列表燈箱庫中的每個 v 渲染圖像創建
這是我的代碼:
<div class="m-3" v-for="(item, imageIndex) in info" :key="item.id">
<CoolLightBox
:items = "[result[imageIndex]]"
:index= "index" // here i need add to index +1 every time ...index0, index1, index2
@close= "index = null"> // here i need add to index +1 every time ...index0, index1, index2
</CoolLightBox>
<img
class="img-thumbnail"
@click="index = imageIndex" // here i need add to index +1 every time ...index0, index1, index2
:src= "[result[imageIndex]]">
</div>
export default {
components: {
CoolLightBox
},
data: function () {
return {
result: [
'static/m/954.jpg',
'static/m/955.jpg',
'static/m/956.jpg'
],
index: null
}
}
}
我嘗試這樣的事情
<CoolLightBox
:items = "[result[0]]"
:index= "`index${imageIndex}`"
@close= "`index${imageIndex}` = null">
</CoolLightBox>
但它不適合我
嘗試:
:index = "'index' + imageIndex"
這是官方文檔中的確切示例: https://vue-cool-lightbox.lucaspulliese.com/
<template>
<div id="app">
<CoolLightBox
:items="items"
:index="index"
@close="index = null">
</CoolLightBox>
<div class="images-wrapper">
<div
class="image"
v-for="(image, imageIndex) in items"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')' }"
></div>
</div>
</div>
</template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.