在Vue v-for中是否有方法在每次迭代中访问两个元素?

cbwuti44  于 2023-01-17  发布在  Vue.js
关注(0)|答案(2)|浏览(198)

我想在每张幻灯片上显示两个ConditionCardComponent。我已经添加了两个ConditionCardComponent,但在每次迭代中只能访问一(1)个条件项。结果应该看起来像是在一张幻灯片上有两个ConditionCardComponent。x1c 0d1x
这是一张卡片的结果。想象期望的结果是每张幻灯片中的两张卡片。

<template v-for="(condition, index) in dealData.Conditions" :key="index">
        <q-carousel-slide :name="index" class="row no-wrap slide-card">
          <ConditionCardComponent
            class="full-height full-width"
            :condition-details="condition.Details"
            :condition-status="condition.Status"
          />
          <ConditionCardComponent
            class="full-height full-width"
            :condition-details="condition.Details"
            :condition-status="condition.Status"
          />
        </q-carousel-slide>
      </template>

用有限数量的硬编码卡片很容易做到这一点。我所要做的就是把每两张卡片放在一张幻灯片中,并给予它一个“col-6”样式。问题是当我从一个对象阅读时。

0wi1tuuw

0wi1tuuw1#

v-for无法在本地处理这种情况,您必须为此创建自己的数据结构。
您可以将计算属性创建为元组数组,如下所示:[[condition1, condition2], [condition3, condition4], ...]

<script setup>
const slides = computed(() => {
  const slides = []
  for(let i = 0; i < dealData.Conditions.length; i += 2) {
    slides.push([dealData.Conditions[i], dealData.Conditions[i+1]])
  }
  return slides
})
</script>

<template>
  <template v-for="(conditionsTuple, index) in slides" :key="index">
    <q-carousel-slide :name="index" class="row no-wrap slide-card">
      <ConditionCardComponent
         class="full-height full-width"
         :condition-details="conditionsTuple[0].Details"
         :condition-status="conditionsTuple[0].Status"
       />
       <ConditionCardComponent
          class="full-height full-width"
          :condition-details="conditionsTuple[1].Details"
          :condition-status="conditionsTuple[1].Status"
       />
    </q-carousel-slide>
  </template>
</template>
ar7v8xwq

ar7v8xwq2#

我以前从未听说过这种行为,但我认为最简单的方法是根据需要定制数组,例如,在脚本中可以这样做:

export default: {
 data(){
  myArray : ['1','2','3','4','5','6']
 },
 computed: {
  myCustomizedArray(){
    return this.myArray.reduce((myFinalArray, item, index, wholeArray)=>{
     if(index%2===0){
      return [...myFinalArray, [item, wholeArray[index+1]]]
     }
     return myFinalArray
    }, [])
  }
 }
}

此计算方法myCustomizedArray()将返回一个数组的数组,如下所示

[[1, 2],[3, 4]]

如果数组的长度是奇数,它将返回最后一个嵌套数组的未定义值,但是我将把这个任务留给你,这是我的工作方式

相关问题