Eslint-plugin-vue: vue/no-template-key, vue/valid-v-for need to be updated for vue-next 3.0.0-rc.6
Due to a vue compiler error, I was made aware that in Vue 3, :key can/should be placed directly on instead of the direct child element. I'm not sure when this changed, but a recent vue-next commit that is now part of 3.0.0-rc.6 now throws the error when compiling.
Re: https://github.com/vuejs/vue-next/commit/b0d01e9db9ffe5781cce5a2d62c8552db3d615b0
Checklist
- [x] I checked the FAQ.
Tell us about your environment
- ESLint version: 7.7.0
- eslint-plugin-vue version: 7.0.0-beta.2
- Node version: 14.8.0
- Operating System: Ubuntu 20.04.1 LTS
What did you do?
<template v-for="val in tree" :key="val.refId">
<component :is="MyComponent" :item="val" />
</template>
What did you expect to happen?
No ESLint rule errors.
What actually happened?
error: '<template>' cannot be keyed. Place the key on real elements instead (vue/no-template-key) at src/ContentFrame/ContentFrame.vue:36:5:
35 | <div ref="root" class="ContentFrame">
> 36 | <template v-for="val in tree" :key="val.refId">
| ^
37 | <component :is="MyComponent" :item="val"
error: Custom elements in iteration require 'v-bind:key' directives (vue/valid-v-for) at src/ContentFrame/ContentFrame.vue:37:7:
36 | <template v-for="val in tree" :key="val.refId">
> 37 | <component :is="MyComponent" :item="val"
| ^
bompus
All 6 comments
Thank you for this issue.
I didn't know about changing the template key handling. I need to check the template key handling in Vue3 and think about changing this plugin.
Please work around the this problem by turning off the false positive rules until the fix and released.
ota-meshi
on 20 Aug 2020
See also https://github.com/vuejs/vue-next/issues/1734#issuecomment-666877872
sodatea
on 20 Aug 2020
I missed that, sorry 😅
ota-meshi
on 20 Aug 2020
related: vuejs/vue-next#1907
ota-meshi
on 20 Aug 2020
I considered changing this plugin to solve this problem.
First, we need to make four changes:
- #1281 Change
vue/no-template-keyto allowv-forkey. If you don't usev-for, it will still report the key as an error. - #1287 Change
vue/valid-v-forrule to not report, both when placing a key on<template>and when placing keys on child elements of<template>.
The reason we don't even report when placing keys on child elements is to make the rule available in Vue2. - #1287 Change
vue/require-v-for-keyrule to be the same as thevue/valid-v-forrule. - #1281 Add
vue/no-v-for-template-keyrule that disallow the key placed in the<template v-for>. and add this rule to the category for Vue2. This rule reports invalid use with Vue2.
Next, I think it's useful to add the following new rule for Vue3:
- #1289 Add
vue/no-v-for-template-key-on-childrule that disallow the key placed in the child elements of<template v-for>.
This rule reports an error similar toX_V_FOR_TEMPLATE_KEY_PLACEMENT.
I welcome your opinions. If you have any opinions please comment this issue.
I will work on these when I have time.
ota-meshi
on 21 Aug 2020
Your proposals sound great to me. Can’t wait for these changes to be made!
On Thu, Aug 20, 2020 at 7:14 PM Yosuke Ota notifications@github.com wrote:
>
>
I considered changing this plugin to solve this problem.
First, we need to make four changes:
Change vue/no-template-key to allow v-for key. If you don't use v-for,
it will still report the key as an error.Change vue/valid-v-for rule to not report, both when placing a key
on and when placing keys on child elements of .The reason we don't even report when placing keys on child elements is
to make the rule available in Vue2.Change vue/require-v-for-key rule to be the same as the
vue/valid-v-for rule.Add vue/no-v-for-template-key rule that disallow the key placed in
the . and add this rule to the category for Vue2. This
rule reports invalid use with Vue2.Next, I think it's useful to add the following new rule for Vue3:
Add vue/no-v-for-template-key-on-child rule that disallow the key
placed in the child elements of .This rule reports an error similar to X_V_FOR_TEMPLATE_KEY_PLACEMENT.
I welcome your opinions. If you have any opinions please comment this
issue.I will work on these when I have time.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/eslint-plugin-vue/issues/1279#issuecomment-677983842,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAB55Q2YWGOCU4F2EP6IQ73SBXDAXANCNFSM4QFOAPOQ
.
bompus
on 21 Aug 2020
Related issues
Mouvedia
·
3Comments
armano2
·
4Comments
gluons
·
4Comments
rodneyrehm
·
4Comments
filipalacerda
·
4Comments
Most helpful comment
Your proposals sound great to me. Can’t wait for these changes to be made!
On Thu, Aug 20, 2020 at 7:14 PM Yosuke Ota notifications@github.com wrote:
>
>