问题描述
我需要在 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,index2
</CoolLightBox>
<img
class="img-thumbnail"
@click="index = imageIndex" // here i need add to index +1 every time ...index0,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>