gpt4 book ai didi

html - 如何增加 v-if 显示的值?

转载 作者:行者123 更新时间:2023-12-01 12:04:26 27 4
gpt4 key购买 nike

所以要解释为什么我需要这样做:
我有一个 masonry照片和我需要为每张照片添加一个索引。

问题是我不能依赖 v-for 的索引,因为有时它是故意的“空箱”。

|---|---|---|
| | 2 | 3 |
| 1 |---|---|
| | 4 | 5 |
|---|---|---|
| 6 | | 8 |
|---| 7 |---|
| 9 | | 10|
|---|---|---|

代码看起来像这样。
<div v-for="(row, i) in rphotos" :key="i">
<div v-for="(p, j) in row" :key="i*nbCol+j">
<div v-if="p"
:data-index="index"
class="g-item">
<!-- Increment index there -->
</div>
<div v-else class="g-item g-empty" />
</div>
</div>

但是由于 vuejs 的 react 性,我的索引将始终更新。

另一个解决方案可能是检查行上的计算值, g-item是不是太 g-empty但是我什至不确定这是可能的,但我不知道我能做到这一点。

我最好的选择是增加显示的值,因为它是在像 Smarty 或 Blade 这样的 PHP 模板渲染中完成的。但是由于 javascript 框架是响应式(Reactive)的,有没有办法做到这一点?

欢迎任何想法。

最佳答案

不清楚您的数据是什么样的,但您可以设置 indexrphotos 中的每个项目在显示它们之前,您可以访问 v-for 中的索引与 p.index :

<div v-for="(row, i) in rphotosFiltered">
<div v-for="(p, j) in row">
<div v-if="p.index !== null" :data-index="p.index"></div>
<div v-else/>
</div>
</div>
data(): {
return {
rphotos: [
[
{index: 1, item1: ''},
{index: null, item2: ''}
],
[
{index: 3, item3: ''}
]
]
}
},
computed: {
rphotosFiltered() {
// modify "this.rphotos" list here the way you need it
// return it
}
}

关于html - 如何增加 v-if 显示的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59174065/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com