Elements in iteration expect to have ‘v-bind:key’ directives

Working with ESLInt in Visual Studio code you might run into this error

elements in iteration expect to have 'v-bind:key' directives.eslintvue/require-v-for-key
[vue/require-v-for-key]
Elements in iteration expect to have 'v-bind:key' directives

Checking the Vue documentation at https://vuejs.org/v2/guide/list.html#v-for-with-a-Component you will see this

in 2.2.0+, when using v-for with a component, a key is now required.

At Stack Overflow thread https://stackoverflow.com/q/47395535/460885 you get a better explanation based on the (older) documentation:

To give Vue a hint so that it can track each node’s identity, 
and thus reuse and reorder existing elements, you need to provide a unique [...] 
It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.

So adding the v-bind:key does not hurt either way.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.