回答編集履歴
3
サンプルソース修正
test
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
■修正案
|
|
12
12
|
|
|
13
13
|
```javascript
|
|
14
|
-
<template v-for="nav_list in nav_lists"
|
|
14
|
+
<template v-for="nav_list in nav_lists">
|
|
15
15
|
<v-list-item
|
|
16
16
|
v-if="!nav_list.lists"
|
|
17
17
|
:key="nav_list.name + 'A'" // <-- 一意になるようにAを追加
|
2
サンプルソース追加
test
CHANGED
|
@@ -8,6 +8,23 @@
|
|
|
8
8
|
|
|
9
9
|
ですので、「v-list-item」も「v-list-group」も同じ親の配下のエレメントなので、同じキーを持てないため破線が出ています。
|
|
10
10
|
|
|
11
|
+
■修正案
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
<template v-for="nav_list in nav_lists" :key="nav_list.name">
|
|
15
|
+
<v-list-item
|
|
16
|
+
v-if="!nav_list.lists"
|
|
17
|
+
:key="nav_list.name + 'A'" // <-- 一意になるようにAを追加
|
|
18
|
+
>
|
|
19
|
+
</v-list-item>
|
|
20
|
+
<v-list-group
|
|
21
|
+
v-else
|
|
22
|
+
:key="nav_list.name + 'B'" // <-- 一意になるようにBを追加
|
|
23
|
+
>
|
|
24
|
+
</v-list-group>
|
|
25
|
+
</template>
|
|
26
|
+
```
|
|
27
|
+
|
|
11
28
|
**Vue3の場合**
|
|
12
29
|
|
|
13
30
|
下記のように説明されています。
|
|
@@ -17,7 +34,7 @@
|
|
|
17
34
|
|
|
18
35
|
なので、v-ifに対して「key」を設定する必要はないでしょう。
|
|
19
36
|
|
|
20
|
-
|
|
37
|
+
■修正案(Vue2でも通るかも)
|
|
21
38
|
|
|
22
39
|
```javascript
|
|
23
40
|
<template v-for="nav_list in nav_lists" :key="nav_list.name"> // <-- keyを追加
|
1
サンプルソース修正
test
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
**修正案**
|
|
21
21
|
|
|
22
22
|
```javascript
|
|
23
|
-
<template v-for="nav_list in nav_lists" :key="nav_list.name"
|
|
23
|
+
<template v-for="nav_list in nav_lists" :key="nav_list.name"> // <-- keyを追加
|
|
24
24
|
<v-list-item
|
|
25
25
|
v-if="!nav_list.lists"
|
|
26
26
|
//:key="nav_list.name"
|