[Vuejs]-How to use v-for to iterate through elements

4👍

You are using an object as your key, which is causing the error. Since the key value is always expected to be a string, every time it sees an object, it will replace the last item in that loop (with the key [object Object], because it is the non-primitive value), and you’ll only see one.

If you are expecting to change the items, you make look at using nameModule._attributes.id as your key.

<div v-for="nameModule in nameModules" :key="nameModule._attributes.id" class="col-12">

Just beware that, if you don’t have an _attributes attached to one of those modules, it will hide the entire loop.

You could also use the index of the loop:

<div v-for="(nameModule, index) in nameModules" class="col-12">

Using the index is fine as long as you are not interacting with any of the elements in the loop. But, if you are, then it is recommended not to do this.

Leave a comment