【ESLint Error】vueのno-v-for-template-keyとno-v-for-template-key-on-childが同時に出た時の対処法
挨拶・背景
こんにちは!
現在、SHIFTの開発支援プロダクト推進部にてTB Projectに参加しております、yasudaです。
今回は、開発時にハマったESLintのエラーについて共有できればと思います。
過去記事:
想定している対象読者
ESLintを用いた開発環境でvue2系,vue3系を利用している人
そもそもどんなエラー?
'template' cannot be keyed. Place the key on real elements instead.
これは、vue/no-v-for-template-keyという名前のESLintエラーなのですが、「templateタグにkeyを置いちゃだめだよ、keyは代わりに本物のタグの方に置いて!」という旨のエラーとなります。どういう事かというと、
<template v-for="item in list" :key="item.id">
<div />
</template>
こう書くのではなく、
<template v-for="item in list">
<div :key="item.id" />
</template>
こうしてくれと言っております。書き方が違うという指摘ですね。
key should be placed on the 'template' tag.
一方こちらは、vue/no-v-for-template-key-on-childという名前のESLintエラーなのですが、「keyはtemplateタグに置くべきだよ!」と言っております。どういう事かというと、
<template v-for="todo in todos">
<Foo :key="todo" />
</template>
こう書くのではなく、
<template v-for="todo in todos" :key="todo">
<Foo />
</template>
こう書いてくれと言っております。こちらも書き方が違うという指摘ですね。
これの何が問題なの?
こちら両方のエラーに従っていると、永遠にエラーが解消されません。
どういうこと?
お気づきの方いらっしゃるかもしれないですが、この上記二つのエラーはそれぞれ、vue2系、vue3系に対応したエラーとなっております。
実は、vueのバージョン2系統では、以下のようにkeyをtemplateタグの配下の実際に存在するタグに記載する必要があります。
<template v-for="item in list">
<div :key="'heading-' + item.id">...</div>
<span :key="'content-' + item.id">...</span>
</template>
一方で、vueのバージョン3系統では、keyはtemplateタグに直接記載する記法となりました。つまり、vue2ではダメだった下記が、vueの書き方として正解となります。
<template v-for="item in list" :key="item.id">
<div>...</div>
<span>...</span>
</template>
この両方のエラーが発生してしまった場合、どうすれば良い?
答えは簡単で、
自分の書いているvueのversionに合わせて、不必要なESLintエラーの方の設定をoffにする。
そもそもtemplateタグを使わずに書く。
といった形になります。
最後に
いかがだったでしょうか。
言語の書き方が変わると、エラーの仕様も当然変わりますが、書き方の変化に追いついていないとエラーの解明が少し難しくなるかもしれません。
皆さんも是非、ESLintなどの静的解析ツールのエラーを通して、言語理解を深めて頂ければと思います。
この記事が皆様のvueに対する理解に一役買うことができたら幸いです。
この記事を最後まで読んだ方は是非、ハートボタンからいいねをお願いいたします。
ご清覧ありがとうございました。
参考文献
https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for
https://eslint.vuejs.org/rules/no-v-for-template-key-on-child.html
お問合せはお気軽に
https://service.shiftinc.jp/contact/
SHIFTについて(コーポレートサイト)
https://www.shiftinc.jp/
SHIFTのサービスについて(サービスサイト)
https://service.shiftinc.jp/
SHIFTの導入事例
https://service.shiftinc.jp/case/
お役立ち資料はこちら
https://service.shiftinc.jp/resources/
SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/