DEV Community

More Fun With VueJS

Nathan Kratzmeyer on March 25, 2020

Welcome to to the second part of my Vue Basics tutorial. In the first part, we covered how to set up a simple project, display data, use custom met...
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 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.

Collapse
 
nkratzmeyer profile image
Nathan Kratzmeyer

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