Vue v-for 中有一种方法可以在每次迭代中访问两个元素吗？

Question

我想在每张幻灯片中显示两个 ConditionCardComponents。 我添加了两个，但在每次迭代中我只能访问一 (1) 个条件项。 结果应该看起来像我们在一张幻灯片中有两个 ConditionCardComponents。

这是一张卡的结果。 将期望的结果想象成每张幻灯片中的两张卡片。

 <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”样式。 问题是当我正在读取 object 时。

Answer 1

我以前从未听说过这种行为，但我认为最简单的方法是根据您的需要自定义数组。 例如，在您的脚本中，您可以执行以下操作：

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()将像这样返回一个 arrays 的数组

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

如果数组的长度是奇数，它将返回最后一个具有未定义值的嵌套数组，但我会把这个任务留给你。 这就是我会做的方式

Answer 2

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>