В Vue.js 3 директива v-for позволяет перебирать массив или объект и динамически отображать элементы. Одним из распространенных требований при работе с v-for является доступ к индексу текущей итерации. В этой статье мы рассмотрим различные методы получения индекса в цикле v-for, а также приведем примеры кода для каждого подхода.

Метод 1: использование параметра index
Директива v-for предоставляет необязательный второй параметр, который представляет индекс текущей итерации. Вот пример:

<div v-for="(item, index) in items" :key="index">
  {{ index }} - {{ item }}
</div>

Метод 2. Использование вычисляемого свойства
Если вам нужна большая гибкость или вы хотите выполнить дополнительную логику на основе индекса, вы можете использовать вычисляемое свойство для создания индексированной версии ваших данных. Вот пример:

<template>
  <div v-for="item in indexedItems" :key="item.id">
    {{ item.index }} - {{ item.name }}
  </div>
</template>
<script>
export default {
  computed: {
    indexedItems() {
      return this.items.map((item, index) => ({
        ...item,
        index: index + 1
      }));
    }
  }
};
</script>

Метод 3: использование метода Array.prototype.forEach()
Другой подход — использовать метод Array.prototype.forEach()непосредственно в массиве и вручную отслеживать индекс. Вот пример:

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ getIndex(item) }} - {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    getIndex(item) {
      const index = this.items.indexOf(item);
      return index !== -1 ? index + 1 : '';
    }
  }
};
</script>

Метод 4. Использование метода Array.prototype.entries().
Если вы работаете с массивом, вы также можете использовать метод Array.prototype.entries(), чтобы получить и индекс, и значение внутри цикла v-for. Вот пример:

<div v-for="[index, item] in items.entries()" :key="index">
  {{ index }} - {{ item }}
</div>

В этой статье мы рассмотрели несколько методов доступа к индексу в цикле v-for во Vue 3. Мы рассмотрели непосредственное использование параметра индекса, использование вычисляемого свойства, использование метода Array.prototype.forEach() и использование метода Array.prototype.entries() для массивов. Понимая эти различные подходы, вы можете выбрать тот, который лучше всего соответствует вашим конкретным потребностям при работе с директивой v-for Vue 3.