Vue for loop inside template

Question

I have a Vue template wich recieves a json string as data:

<component data="{{ object.toJson() }}"></component>

object consists out of a name and an array of strings. I now have this in my

<template>    
    <ul>
      <li v-for="url in object.data['urls']">{{ url }}</li>
    </ul>
</template>

This however is giving errors on my linter and I was wondering why. This is exactly as according to the Vue examples posted on the documentation.

error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

score 5 · Accepted Answer · answered Sep 26 '18 at 12:10

5

You can add an index to your elements like so:

<template>    
    <ul>
      <li v-for="(url, index) in object.data['urls']" :key="index">{{ url }}</li>
    </ul>
</template>

answered Sep 26 '18 at 12:10

Dylan

[Please don't answer duplicate questions, you should mark them as such instead](https://stackoverflow.com/help/duplicates). – str Sep 26 '18 at 12:16

1 Answers1