-
-
Notifications
You must be signed in to change notification settings - Fork 593
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
'v-for' directives require 'v-bind:key' directives. #261
Comments
In 2.2.0+, when using v-for with a component, a key is now required. |
@ideal123 This is intended ESLint feature. You can turn off eslint check in future release. See #235 (comment) @emrekaranfil Would you mind provide an example repo for this problem? It seems eslint is reporting at wrong location. @topul This is a valid bug! |
@topul I use v-for with a html element, and a key is unnecessary @HerringtonDarkholme I disabled ESlint Plugin, but there is the same error. |
I think that this is still issue with vetur version 0.8.6. -> key is required with a component, but it should not be required with a html element like <li> (in ideal123's case) or <option> (in my case), etc. |
I'll publish a new version soon! |
I see v0.0.10 was released 12 days ago, but I'm not sure it contained a fix for this. If it did not, perhaps this issue should be reopened since it seems it is still a problem currently. |
Forgot to update dependency for eslint... |
I am still getting a form of this error. I have Vetur 0.9.3 installed as plug-in to VS Code. I have globally installed
I should point out that VS Code gives me complaint when I copy&paste the basic usage code directly frrom the Vue.js documentation.. |
The behavior only depends on |
@grugknuckle This is intended feature from eslint-vue. You can turn off vetur's lint and use vscode-eslint to customize your rules. Also, raising a proposal for eslint-plugin-vue is a good choice. |
Ok. Thank you. I can see that this is working as intended in the sense that there is a unit test for it. Can anyone explain why this test is here? What is the purpose of throwing an invalid warning on code which is identical to what it suggested in the vue.js documentation for the v-for directive? See for example, the basic usage code here https://vuejs.org/v2/guide/list.html#Basic-Usage I'm just curious as to what code pattern this is supposed to prevent. So that I can do it right. |
There are 2 rules about v-for and v-bind:key. One is Vue core team has recommended to use v-bind:key at all, but it's not errors on non custom components which don't have v-bind:key, so you can disable |
Perfect! Thank you. |
maybe vscode only, webstorm have not report this error |
@octref so does it come as a dependency? Does it have to be updated in some specific way? |
add v-bind:key="the key property" on your li item |
Suuuper annoying! Everytime I opened the vue files developed by other colleagues, the red lines |
I don't want to be rude. But I hope someone can read the doc before complaining about their visual handicap. https://github.com/vuejs/vetur/blob/master/docs/linting-error.md#linting Again, VueJS recommend to add key to every element and component. Adding an eslint step to your project and teaching your teammate is a good choice.
|
i dont understand why this is REQUIRED when the docs say its recommended, even more
results in an id of "tag-undefined" while
results in "tag-0" etc but with error in the IDE, and adding both
feels stupid and not necesary since its defining the key twice (?) (and no, you cant add :key to a template tag, so thats not a solution) |
@SaphiLC You're not defining the key twice, you're choosing to use it twice. Why not skip the ID altogether? 99% of the time, unless you are dealing with |
please check official doc (v-for) part, solution was add :key="item.id". |
The error:: [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives
|
@Anzimanpkp's solution worked like a magic for me.
Thanks @Anzimanpkp |
Code like this: |
You should add |
this work for me |
|
If that wasn't obvious... The following is not an uncommon usage of
|
@tvkit It's an easy modification of your code. Assuming that
See my comment above about why this is really a problem with the vue.js documentation and NOT a problem with the vetur implementation of this rule. |
I'm getting the error message when I don't need a key.
|
@grugknuckle your code gives the error |
I think this lint should be disabled. It clearly doesn't work properly.
This lint can be disabled until it can reliably detect that the elements contain state. |
I found this rule to not be helpful with the project I am working in and have disabled it. I am using VS Code and set up the ESLint extension. https://eslint.org/docs/user-guide/getting-started In settings.json I disabled vetur's validation for templates with "vetur.validation.template": false" And then in my rules for es lint (.eslintrc.js for me) I set "vue/require-v-for-key": "off" I think this is less disruptive than changing each v-for when we are only iterating through data that will be static for the purpose of displaying. I haven't managed to get it to work with ignoring line below or entire file as they would be more preferable for some. |
Keys are used as hashes to optimise DOM rendering. If incorrectly used they will slow performance and use more memory over automatically generated keys. People who don't understand what makes a good key will be generating poorer performance UIs than auto generated keys. That's why keys should be optional. Apart from the fact it's very annoying getting these errors and existing code shows errors. |
I've also tried adding this to my
|
This lint is too restrictive, and isn't able to detect the cases when it is wrong. See vuejs/vetur#261
As mentioned previously, we need to bind the
But is there a way to disable this rule ? There are multiple situations where it should be put off, for example when we work with slots. |
AHA! I figured out my personal issue - I never used parentheses ever! Now that I put parentheses in, the squiggly lines go away! Thank you dear Vetur developers for your hard work. If someone else is frustrated with this, I will tell them my solution! |
Just adding my simple solution down to this just in case runs into it later on. After Vue 2.2 this does not work in the latest Vue and throws an error. It needs have a The fix is as simple as adding a key like this: |
You should be using older version of VueJS but in latest versions key binding is mandatory to improve the performance of rendering the v-for elements. So please update your VueJS and check this. To add v-bind:key you have to do something like this. Hope this answers your question. |
No. See https://vuejs.org/v2/api/#v-for |
+1 - Key does not seem to be mandatory, so why is an error forced here? |
Reason: #261 (comment) If you don't need this rule, you can disable I will lock this issue. |
'v-for' directives require 'v-bind:key' directives when I use
<li class="item-right" v-for="n in 19">{{ n }}</li>.
The text was updated successfully, but these errors were encountered: