Skip to content
This repository was archived by the owner on Sep 11, 2021. It is now read-only.

Need v-bind:key now for v-for #13

Open
cliffchristianson opened this issue Mar 18, 2020 · 4 comments
Open

Need v-bind:key now for v-for #13

cliffchristianson opened this issue Mar 18, 2020 · 4 comments

Comments

@cliffchristianson
Copy link

cliffchristianson commented Mar 18, 2020

I got a linting error I think from the Vetur extension on Line 29 in App.vue in vscode
<div class="mt-6 w-full px-4 lg:w-1/2 xl:w-1/3" v-for="destination in popularDestinations">

needs to become something like
<div class="mt-6 w-full px-4 lg:w-1/2 xl:w-1/3" v-for="destination in popularDestinations" v-bind:key="destination">

or it throws a v-bind:key error for me

Not sure if this is a bug or intended from linting, but since vscode advises installing Vetur when it sees a .vue extension, others may have the same problem

@OlamiBounty
Copy link

OlamiBounty commented Mar 19, 2020

your code should be

@cliffchristianson
Copy link
Author

This is the App.vue in 01-getting-up-and-running/06-extracting-reusable-components

A better solution would be to add an id field to the records and then :key=destination.id

@OlamiBounty
Copy link

@cliffchristianson
Copy link
Author

Hey Olami, yeah the key isn't required in the docs so I'm assuming the linter is the culprit, React does the same thing nowadays. Although an easy fix, it broke my page which is why I raised the issue, would hate to see people new to Tailwind get discouraged by something like this.

Should I push my fix?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants