繁体   English   中英

Vue.js v-for 添加到:索引 + “1”

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM