見出し画像

【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>

この両方のエラーが発生してしまった場合、どうすれば良い?

答えは簡単で、

  1. 自分の書いているvueのversionに合わせて、不必要なESLintエラーの方の設定をoffにする。

  2. そもそもtemplateタグを使わずに書く。

といった形になります。

最後に

いかがだったでしょうか。
言語の書き方が変わると、エラーの仕様も当然変わりますが、書き方の変化に追いついていないとエラーの解明が少し難しくなるかもしれません。
皆さんも是非、ESLintなどの静的解析ツールのエラーを通して、言語理解を深めて頂ければと思います。

この記事が皆様のvueに対する理解に一役買うことができたら幸いです。

この記事を最後まで読んだ方は是非、ハートボタンからいいねをお願いいたします。

ご清覧ありがとうございました。

参考文献


執筆者プロフィール:Yutaro Yasuda
22新卒としてSHIFTに入社。趣味は散歩、読書、食事。愛用座布団はtempur.

お問合せはお気軽に
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/