【ESLint Error】vueのno-v-for-template-keyとno-v-for-template-key-on-childが同時に出た時の対処法

2023年2月16日 10:21

挨拶・背景

こんにちは！
現在、SHIFTの開発支援プロダクト推進部にてTB Projectに参加しております、yasudaです。

今回は、開発時にハマったESLintのエラーについて共有できればと思います。

過去記事：

これは、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>

こうしてくれと言っております。書き方が違うという指摘ですね。

一方こちらは、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>

答えは簡単で、

といった形になります。

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

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

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

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

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

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/