前端之家

  1. 首页
  2. 问答

Vue.js v-for 添加到 :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,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>

但它对我不起作用

songweixu 回答：Vue.js v-for 添加到 :index + "1"

试试：

: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>
javascriptlightboxvue.js
本文链接：https://www.f2er.com/905673.html

大家都在问