DEV Community

Discussion on: More Fun With VueJS

Collapse
 
weeb profile image
Patrik Kiss • Edited

Don't forget that elements with the v-for directive require the v-bind:key / :key attribute, otherwise Vue will scream at you(at least if you're using the development version)

Since this series is for beginners, I would include that in the code too.

Collapse
 
nkratzmeyer profile image
Nathan Kratzmeyer

I went ahead and added the v-bind:key for completeness. Thanks for the suggestions!

Collapse
 
nkratzmeyer profile image
Nathan Kratzmeyer

I thought about that and opted to leave it out since Vue doesn't seem to care when you're pulling the script from CDN. I figured it would be a distraction for the simple case illustrated. I'll definitely put that in when I write about components.

Collapse
 
bravemaster619 profile image
bravemaster619 • Edited

Vue doesn't seem to care when you're pulling the script from CDN.

Can you explain a bit more about this?

Maybe Vue suppress warnings in the production mode.

You should definitely include keys in v-for loops.

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 key attribute for each item

vuejs.org/v2/guide/list.html#Maint...

Thread Thread
 
nkratzmeyer profile image
Nathan Kratzmeyer

I only meant that Vue doesn't complain about this when running with the setup from this article. I definitely understand that it is needed/required for more advanced scenarios. Since my post is simply showing how to display, I opted to leave it out.