VSCodeの赤い波線の解決方法

ネットでvuetifyのコードを拾ってきました。これをVSCodeで表示すると下記コードに書きましたが赤い波線が表示されます。表示されたメッセージをグーグル翻訳すると [v-if/elseブランチは一意のキーを使用する必要があります] です。

vuetify
1<template>
2  <v-app>
3    <v-navigation-drawer>
4      <v-container>
5        <v-list>
6          <template v-for="nav_list in nav_lists">
7            <v-list-item
8              v-if="!nav_list.lists"
9              :key="nav_list.name"
10            >
11            </v-list-item>
12            <v-list-group
13              v-else
14              :key="nav_list.name" ← コードの下に赤い波線が表示され、その理由はv-if/else branches must use unique keysと表示されます
15            >              
16            </v-list-group>
17          </template>
18        </v-list>
19      </v-container>
20    </v-navigation-drawer>
21  </v-app>
22</template>

ifかelseの:key="nav_list.name" を :key="nav_list.name+1" などとすれば赤い波線は消えますが何か気持ち悪いです。
正解の解決方法をご教授してください。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Vueのバージョンよって「key」の扱いは違います。

Vue2の場合

下記のように説明されています。

同じ共通の親を持つ子は、一意なキーを持っていなければなりません。重複するキーはエラーを描画する原因になります。

Vue2 特別な属性 key

ですので、「v-list-item」も「v-list-group」も同じ親の配下のエレメントなので、同じキーを持てないため破線が出ています。

■修正案

javascript
1<template v-for="nav_list in nav_lists">
2    <v-list-item
3        v-if="!nav_list.lists"
4        :key="nav_list.name + 'A'" // <-- 一意になるようにAを追加
5    >
6    </v-list-item>
7    <v-list-group
8          v-else
9          :key="nav_list.name + 'B'"  // <-- 一意になるようにBを追加
10    >
11    </v-list-group>
12</template>

Vue3の場合

下記のように説明されています。

Vue が一意の key を自動的に生成するようになったため、v-if/v-else/v-else-if 分岐で key が不要になりました。
破壊的変更: <template v-for> における key は、（子の要素ではなく）<template> タグに配置する必要があります。

Vue3 Key属性

なので、v-ifに対して「key」を設定する必要はないでしょう。

■修正案(Vue2でも通るかも)

javascript
1<template v-for="nav_list in nav_lists" :key="nav_list.name"> // <-- keyを追加
2    <v-list-item
3        v-if="!nav_list.lists"
4        //:key="nav_list.name"
5    >
6    </v-list-item>
7    <v-list-group
8          v-else
9         // :key="nav_list.name" 
10    >
11    </v-list-group>
12</template>