Skip to content

Update introduction.md #796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 14, 2021
Merged

Conversation

doingandlearning
Copy link
Contributor

Description of Problem

I was working through the examples in Vue 3 and got the following error:

Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

Proposed Solution

Adding the key removes this error.

Additional Information

I'm new to Vue (coming from React) and don't know if I'm missing something.

I was working through the examples in Vue 3 and got the following error:
```
Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key
```

Adding the key removes this error. I'm new to Vue (coming from React) and don't know if I'm missing something.
@skirtles-code
Copy link
Contributor

Thanks for the PR. You raise an interesting point. Personally I'm caught in two minds about whether to add the key or not.

Some observations:

  1. Vue itself doesn't require a key on elements, only components. The error you mentioned is coming from the linter, which enforces some optional best practices.
  2. Generally that page tries to avoid bringing up any difficult concepts that might need explaining. It's a blast through the functionality to set the scene for the pages that follow.
  3. A later example does include a key. That example needs it because it's on a component, not an element. It also includes a comment, effectively telling the reader to ignore the key for now. If we do introduce a key to the earlier example then we'd need a similar note.
  4. That page uses v-bind: in full rather than the : shorthand. The shorthands are only used after they're introduced on the Template Syntax page.

@NataliaTepluhina
Copy link
Member

We discussed this a bit with Vue team. @skirtles-code brought a few great points, and they are correct: technically key is not required on elements, ESLint is too strict with this warning. However, after some discussion we came up with the point it's safer to always add a key - overall it results in less mental overhead than reasoning about whether it's safe to not use a key (for example, we don't use a key on the element and then we add an <img>, and apparently now the key is required)

So we will return a section about key to this chapter. I've edited your changes and will add more of them in my upcoming PR

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

Successfully merging this pull request may close these issues.

3 participants