Iterating through vue array using index

Question

I have an object of some arrays. Considering the arrays have equal items, I want to iterate through these array and show their data. Does it make sense for me to iterate through index of array.

<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>

My main reason to ask this question is because I don't see any examples where v-for is applied using index of array. If I am doing it wrong what other options do I have to achieve this?

Answer 1

When you use v-for , the first parameter will be the element of the array, and not the index. To get the index, you have to add parenthesis and a comma. Got it? No??

Here:

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

Then you can use the index.

Answer 2

index is the 2nd argument in a v-for

Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.

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