vuejs / vetur

Vue tooling for VS Code.
https://vuejs.github.io/vetur/
MIT License
5.75k stars 594 forks source link

v-for directive is showing error #726

Closed ip127001 closed 6 years ago

ip127001 commented 6 years ago

It shows "Elements in iteration expect to have 'v-bind:key' directives". v-for directive is independent and also code is working but vetur is giving the above suggestion and red under-line.

leopiccionia commented 6 years ago

It seems to be duplicate of #261.

Please notice that, even though ignoring it won't break your code, it's strongly recommended to use :key together with v-for (see here and here).

ip127001 commented 6 years ago

thank you.

https://mailtrack.io/ Sent with Mailtrack https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality&

On Sun, Mar 11, 2018 at 9:56 PM, Leonardo Piccioni de Almeida < notifications@github.com> wrote:

[image: Boxbe] https://www.boxbe.com/overview This message is eligible for Automatic Cleanup! (notifications@github.com) Add cleanup rule https://www.boxbe.com/popup?url=https%3A%2F%2Fwww.boxbe.com%2Fcleanup%3Fkey%3D7HPuoOocPDiQQ22m6BdxQ9h%252Fp2VgJIGYgGvVEd3RPVM%253D%26token%3D%252BkUPrO1svhRZpX5t9BitNgy2ol2MKkl%252B%252BWLzye%252BquikzRxWI%252BtmE3QZGcmBcOWBppC4kNawoWwbBRAK7MaH1NmUof7Qr4P2y6T9jn%252FDVSOgig8c8bQbLwFpXvoPvkOkKsU3jeHHtAXuAotFZ0lsWOQ%253D%253D&tc_serial=37402945074&tc_rand=1659029194&utm_source=stf&utm_medium=email&utm_campaign=ANNO_CLEANUP_ADD&utm_content=001 | More info http://blog.boxbe.com/general/boxbe-automatic-cleanup?tc_serial=37402945074&tc_rand=1659029194&utm_source=stf&utm_medium=email&utm_campaign=ANNO_CLEANUP_ADD&utm_content=001

It seems to be duplicate of #261 https://github.com/vuejs/vetur/issues/261.

Please notice that, even though ignoring it won't break your code, it's strongly recommended to use :key together with v-for (see here https://vuejs.org/v2/guide/list.html#key and here https://vuejs.org/v2/style-guide/#Keyed-v-for-essential).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vuejs/vetur/issues/726#issuecomment-372128076, or mute the thread https://github.com/notifications/unsubscribe-auth/AcnY9I_BAK-wnktT6Li0Aj7EXp-CDZ94ks5tdVAegaJpZM4SlswI .

octref commented 6 years ago

@leopiccionia Thanks for helping out with the question!

uri commented 5 years ago

@octref

It seems that using v-for without a key is usable when iterating over a simple object/array that is not a component.

It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.

and

key with v-for is always required on components...


I'm essentially doing something like:

this.errors = ['something went wrong']
<li v-for="error in errors">{{error}}</li>

But vetur pushes me to do something like:

<li v-for="(error,index) in errors" :key="index">{{error}}</li>

Which according to the docs (but maybe not in practice?) is unnecessary.

octref commented 5 years ago

@uri You can disable that rule by either vetur.validation.template false, or disabling it through eslint-plugin-vue setting: https://github.com/vuejs/eslint-plugin-vue.

octref commented 5 years ago

Cool username btw

AmineAch commented 4 years ago

Thank s bro