Как получить индекс в директиве Vue.js v-for: объяснение нескольких методов

Чтобы получить индекс при использовании директивы v-forв Vue.js, вы можете использовать несколько подходов. Вот несколько методов:

  1. Использование второго параметра директивы v-for:

    <div v-for="(item, index) in items" :key="index">
     <!-- Access the index here -->
    </div>
  2. Использование метода Array.prototype.findIndex():

    <script>
    export default {
     data() {
       return {
         items: [...],
       };
     },
     methods: {
       getIndex(item) {
         return this.items.findIndex((element) => element === item);
       },
     },
    };
    </script>
  3. Использование индекса v-forв методе:

    <div v-for="(item, index) in items" :key="index">
     <button @click="doSomething(index)">Click</button>
    </div>
    <script>
    export default {
     methods: {
       doSomething(index) {
         // Use the index here
       },
     },
    };
    </script>
  4. Использование вычисляемого свойства:

    <div v-for="(item, index) in indexedItems" :key="index">
     <!-- Access the index here -->
    </div>
    <script>
    export default {
     computed: {
       indexedItems() {
         return this.items.map((item, index) => ({ item, index }));
       },
     },
    };
    </script>

Это некоторые распространенные методы получения индекса при использовании v-forв Vue.js. Выберите тот, который лучше всего соответствует вашему сценарию.