What could cause a View template to ouput wrong row index?

Question

Context

I have a weird issue on my live environment that I have never seen on my local environment. Cache bins are disabled on my local environment and enabled on live server.

When clearing all caches on live server, the problem disappears for some time, then reappears. When disabling cache bins on live server the problem doesn't seem to happen anymore.

Issue

In my custom theme, I use a simple "Single field" template to override a given view field.

/**
 * @file
 * Theme override for a single field in a view.
 *
 * Available variables:
 * - view: The view that the field belongs to.
 * - field: The field handler that can process the input.
 * - row: The raw result of the database query that generated this field.
 * - output: The processed output that will normally be used.
 *
 * When fetching output from the row this construct should be used:
 * data = row[field.field_alias]
 *
 * The above will guarantee that you'll always get the correct data, regardless
 * of any changes in the aliasing that might happen if the view is modified.
 *
 * @see template_preprocess_views_view_field()
 */

In the output HTML of this field, I need a simple incremental id from 0 to n where n would be the total number of rows in the view results. Something like below for a View with 5 results:

<div data-index="0">...</div>
<div data-index="1">...</div>
<div data-index="2">...</div>
<div data-index="3">...</div>
<div data-index="4">...</div>

So in my field template, I use:

<div data-index="{{ row.index }}">...</div>

This works fine, except on some occasions, only on my live server with caching enabled where the output will be for example:

<div data-index="0">...</div>
<div data-index="1">...</div>
<div data-index="19">...</div>
<div data-index="3">...</div>
<div data-index="21">...</div>

Important notes:

• I sometimes get indices such as 19 when there are only 10 or 15 results in the view so that number seems to come out of the blue.
• This happens when the view is filtered using a single taxonomy term.

Question

Am I wrong assuming that row.index should give me an incremental sequence of integers for every view, with or without caching? If I am wrong, then what should I be using? And if not, what could cause this behavior?

Answer 1

To solve it using views-view-field.html.twig

First in view settings, add field "View Result Counter" and hide from display.

Now in your twig you can do

<div data-index="{{ view.field['counter'].getValue(row) }}">...</div>

Answer 2

If I am wrong, then what should I be using?

Instead, you could do it using views-view--unformatted.html.twig

and modify the row part to

{% set count = 0 %}
{% for row in rows %}
  set count = count + 1
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div data-index=count {{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
{% endfor %}