我想在每张幻灯片上显示两个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”样式。问题是当我从一个对象阅读时。
2条答案
按热度按时间0wi1tuuw1#
v-for
无法在本地处理这种情况,您必须为此创建自己的数据结构。您可以将计算属性创建为元组数组,如下所示:
[[condition1, condition2], [condition3, condition4], ...]
ar7v8xwq2#
我以前从未听说过这种行为,但我认为最简单的方法是根据需要定制数组,例如,在脚本中可以这样做:
此计算方法
myCustomizedArray()
将返回一个数组的数组,如下所示如果数组的长度是奇数,它将返回最后一个嵌套数组的未定义值,但是我将把这个任务留给你,这是我的工作方式