VSCodeの赤い波線の解決方法

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

vuetify

<template> <v-app> <v-navigation-drawer> <v-container> <v-list> <template v-for="nav_list in nav_lists"> <v-list-item v-if="!nav_list.lists" :key="nav_list.name" > </v-list-item> <v-list-group v-else :key="nav_list.name" ← コードの下に赤い波線が表示され、その理由はv-if/else branches must use unique keysと表示されます > </v-list-group> </template> </v-list> </v-container> </v-navigation-drawer> </v-app> </template>

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

コメントを投稿

0 コメント