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

Question

So to explain why I need to do that : I've got a masonry of photos and I need to add an index to each of those photos.

The thing is I can't relie on the index of my v-for because sometimes it is on purpose an "empty case".

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

The code looks like this.

<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>

However due to vuejs reactivity, my index will always be updated.

An other solution could perhaps be to check through a computed if on the row, g-item is not too a g-empty however I'm not even sure it is possible and yet dont see how precisely I could do this.

My best bet would be to increment a value on display as it is done in PHP template rendering like Smarty or Blade. But since javascript frameworks is meant to be reactive is there a way of doing that ?

Any idea is welcomed.

Answer 1

It's not clear what your data looks like, but you can set an index to each item in rphotos before displaying them so you can then access that index inside the v-for with 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
  }
}