title: How to increment a value on display of v-if?
body: <p>So to explain why I need to do that : 
  I've got a <a href="https://masonry.desandro.com/" rel="nofollow noreferrer">masonry</a> of photos and <strong>I need to add an index to each of those photos.</strong> </p>
  
  <p>The thing is I can't relie on the index of my v-for because sometimes it is on purpose an "empty case".</p>
  
  <pre><code>|---|---|---|
  |   | 2 | 3 |
  | 1 |---|---|
  |   | 4 | 5 |
  |---|---|---|
  | 6 |   | 8 |
  |---| 7 |---|
  | 9 |   | 10|
  |---|---|---|
  </code></pre>
  
  <p>The code looks like this.</p>
  
  <pre><code>&lt;div v-for="(row, i) in rphotos" :key="i"&gt;
      &lt;div v-for="(p, j) in row" :key="i*nbCol+j"&gt;
         &lt;div v-if="p"
              :data-index="index" 
              class="g-item"&gt;
            &lt;!-- Increment index there --&gt;
         &lt;/div&gt;
         &lt;div v-else class="g-item g-empty" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However due to vuejs reactivity, my index will always be updated.</p>
  
  <p>An other solution could perhaps be to check through a computed if on the row, <code>g-item</code> is not too a <code>g-empty</code> however I'm not even sure it is possible and yet dont see how precisely I could do this.</p>
  
  <p>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 ?</p>
  
  <p>Any idea is welcomed.</p>