vue/no-template-key, vue/valid-v-for need to be updated for vue-next 3.0.0-rc.6

[bompus]

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: vuejs/core@b0d01e9

Checklist

• 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"
     |       ^

[ota-meshi]

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.

[sodatea]

See also vuejs/core#1734 (comment)

[ota-meshi]

I missed that, sorry 😅

[ota-meshi]

related: vuejs/core#1907

[ota-meshi]

I considered changing this plugin to solve this problem.

First, we need to make four changes:

• Separate rule that report <template v-for key> from no-template-key rule #1281 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 and vue/require-v-for-key rules to not report when placing key on <template> #1287 Change vue/valid-v-for rule 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.
• Change vue/valid-v-for and vue/require-v-for-key rules to not report when placing key on <template> #1287 Change vue/require-v-for-key rule to be the same as the vue/valid-v-for rule.
• Separate rule that report <template v-for key> from no-template-key rule #1281 Add vue/no-v-for-template-key rule 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:

• Add vue/no-v-for-template-key-on-child rule #1289 Add vue/no-v-for-template-key-on-child rule that disallow the key placed in the child elements of <template v-for>.
  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.

[bompus]

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 ***@***.***> 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 <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. - 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 <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: - Add vue/no-v-for-template-key-on-child rule that disallow the key placed in the child elements of <template v-for>. 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 <#1279 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB55Q2YWGOCU4F2EP6IQ73SBXDAXANCNFSM4QFOAPOQ> .