Итерация по массиву vue с использованием индекса

Question

У меня есть объект из некоторых массивов. Учитывая, что массивы имеют одинаковые элементы, я хочу перебрать эти массивы и показать их данные. Имеет ли для меня смысл перебирать индекс массива.

<template>
  <div v-for="index in someObject.listA.length">
    {{someObject.listA[index]}} - {{someObject.listB[index]}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      someObject: {
        listA: [
          'foo', 'bar', 'foobar'
        ],
        listB: [
          'foo', 'bar', 'foobar'
        ]
      }
    }
  }
}
</script>

Моя основная причина задать этот вопрос, потому что я не вижу примеров, где v-for применяется с использованием индекса массива. Если я делаю это неправильно, какие еще варианты у меня есть для этого?

Answer 1

index является вторым аргументом в v-for

Внутри v-for блоков у нас есть полный доступ к родительским свойствам области. v-for также поддерживает необязательный второй аргумент для индекса текущий товар.

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

Answer 2

Когда вы используете v-for, первый параметр будет элементом массива, а не индексом. Чтобы получить индекс, вы должны добавить скобки и запятую. Понял? Нет ??

Здесь:

<div v-for="(el, index) in someObject.listA">

Тогда вы можете использовать индекс.