如何在 v-if 的显示上增加一个值？

Question

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

问题是我不能依赖 v-for 的索引，因为有时它是故意的 "empty case".

|---|---|---|
|   | 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 的反应性，我的索引将始终更新。

另一个解决方案可能是检查行上的计算结果，g-item 不是太 g-empty 但是我什至不确定它是否可能但不知道如何正是我可以做到这一点。

我最好的选择是增加显示值，就像在 PHP 模板渲染（如 Smarty 或 Blade）中所做的那样。但是由于 javascript 框架是反应式的，有没有办法做到这一点？

欢迎任何想法。

Answer 1

不清楚您的数据是什么样的，但您可以在显示 rphotos 中的每个项目之前设置 index，这样您就可以在 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
  }
}

Answer 2

在渲染期间增加变量需要使用 method，这会破坏反应性。为此，我建议在渲染之前计算每个图像的索引。一般来说，渲染过程应该就是这样——渲染已经存在的数据。

如果您无法修改图像数据数组以包含索引属性，您可以使用单独的数组或散列来存储索引值。如果图像数据数组可能被组件外部的代码更改，您可以使用 watch 在图像数据更改时更新索引值。在这种情况下，还要确保在加载组件时使用 created 或 mounted 挂钩来初始化索引值。

更新

不用使用created或mounted挂钩来初始化索引值，只需设置手表的immediate属性即可。这会在加载组件以及监视值更改时强制它运行。

如何在 v-if 的显示上增加一个值？

How to increment a value on display of v-if?

html

masonry

vue.js

vuejs2

vue-reactivity