4

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

问题是我不能依赖我的 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 的反应性，我的索引将始终更新。

另一个解决方案可能是检查行上的计算 if，g-item但g-empty我什至不确定它是否可能，但不知道我能做到这一点有多精确。

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

欢迎任何想法。

4

2 回答 2

3

目前尚不清楚您的数据是什么样的，但您可以在显示它们之前index为每个项目设置一个，这样您就可以在withrphotos中访问该索引：v-forp.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
  }
}
于 2019-12-04T11:13:35.797 回答
3

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

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

更新

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

于 2019-12-04T11:27:28.670 回答