js projects is omitting the key attribute from the elements that they're looping over. In fact, when I tweeted out a message to prepare for this course, asking people to tell me about some of their most common mistakes, sure enough, leaving off the key attribute was the most common one. But what exactly do I mean by that? Well, let's take a look at a little bit of code.
Here on the left-hand side inside of my IDE, I have a script setup tag. And within that, I've defined an items array. It is a reactive ref. And it is an array of objects.
Then I've defined a function that simply shuffles all the items within that array with a function that comes from the popular Lodash library. Then down inside of my template, I have a UL, and inside is an LI, where I loop over each of the items in that array, print out the label property on each individual item, as well as an input. Over on the right-hand side, you can see exactly what this renders to the page. OK, cool.
Back over in the IDE, we have very clearly pointed out for us that there is an issue. This is a RedSql VLINE that comes from ESLint, and it tells us that elements in an iteration expect to have the VBIND key directive present. Now, if you have ESLint properly set up for your project, then you are already ninety nine percent of the way of overcoming this issue because you are now aware of it. However, a lot of people don't have ESLint set up properly for their projects.
js developers. It will tell you how to get ESLint set up for your IDE for Visual Studio Code, as well as a number of other really great tips and tricks for working with Vue and Visual Studio Code. In this lesson, though, I want to get a little bit into the why this is an issue and help you understand it at a deeper level so you know why you're having to provide that key. All right.
So first of all, to prove to you that the key will fix this issue, let me come in here and do colon key. equals, and then I'm going to set the key to something unique per item in my array. So for us, the unique thing is the ID on each item. This is going to be fairly standard when it comes to looping over items from a database.
Sure enough, the red squiggly line disappears, but what have we actually accomplished? Well, let me remove this key once more. And then let's go try things out over in the browser. Right now, email is at the top of my list.
Let me type in my email address here, and then I'll hit the shuffle button. When I hit shuffle, you'll see that the labels for my inputs do indeed shuffle. However, my email address now stayed at the top of the list, and now it's wrongly associated with the website label. So this is the issue when you don't have a key attribute.
And it's really kind of tricky, because if these weren't inputs, then the issue would not have presented itself. So when you're working with static HTML elements, elements that don't contain their own state, reordering the items within the array works absolutely fine without a key. That's why these labels reorder properly. However, when you're working with HTML elements that contain their own state, things like values in an input element or values on a text area, or if you're working with components that contain their own internal state, so components that have reactive references defined within them, that's when this issue presents itself.
Let's add the key back into the code and confirm that it fixes the rendering issue. This time, I'll enter my email into the second input here, since that's where it's ended up in the list now. And once again, hit Shuffle. OK, the first time, email didn't move.
That's really not a good test. Let's shuffle one more time. And yeah, sure enough, email did move to the end of the list, but this time the value of the input went with it. Great.
Now you know to always, always, always provide a key along with your v-fours. Granted, this won't actually be an issue if you're not looping over something that keeps up with its own internal state, or if you're never reordering items within that list. But if your application grows, as applications tend to do, and later on down the line, something within that v-for hits one of those points, you will indeed have this random hard-to-debug issue. And so it is always recommended to provide this key.
Next, let's discuss some rules about what this key should be. Because you could provide the key and still not avoid the issue. What do I mean by that? Well, another very common mistake I see is people using the index for the key.
In a v-for, you can get the index like so. And then a lot of people will provide that as the key. OK, cool. Let's go over to the browser, refresh the page, and try our little experiment again.
Okay, we now have the exact same problem. And what's worse is that our IDE doesn't even show a red squiggly line. We think we've actually solved the issue, but we really haven't. So the lesson here is short and simple.
Never use the index for your key. Instead, you want to provide something that's unique about that actual item, not about where it exists in the list. Typically, that's going to be an ID. However, if you don't have an ID available, you really just have to do the best you can.
In this case, all of our labels are also unique, so that could work as well. Not only that, but also the entirety of each object within the array is also unique. That is, the combination of ID and label is unique. So I could do something like this.
Or I could JSON stringify the entire object. And that means no matter which little thing is different within each object, I've got it covered. You might just think that I could pass in the entire object as my key. However, this won't work as the key expects a string.
And that's why you would want to JSON stringify it instead. However, in most cases, the ID is what you want to reach for. If you want to get even deeper into why it's important to provide keys with your V fours and tips in order to do so appropriately, I suggest you check out this blog post that we published on the view school blog called tips and gotchas for using key with V four in Vue JS three. It goes over some of the exact same things we've gone over in this lesson, but also a few other things and gives you some nice examples to go along with it.
Hopefully now that you've seen this video, you won't have any issue remembering to provide a key with your V four. And I hope you share this with your friends so they don't end up with the same headache themselves.