fix: wrong keys on inspector selector buttons

vuejs · Jul 27, 2022 · e7e51dc · e7e51dc
1 parent 09ee8b2
commit e7e51dc
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -7,6 +7,7 @@ import AppHeaderSelect from './AppHeaderSelect.vue'
 import AppMainMenu from './AppMainMenu.vue'
 
 import { computed, ref, watch, defineComponent } from '@vue/composition-api'
+import type { RawLocation, Route } from 'vue-router'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useRoute } from '@front/util/router'
 import { useBridge } from '@front/features/bridge'
@@ -15,6 +16,14 @@ import { useTabs } from './tabs'
 import { showAppsSelector } from './header'
 import { useOrientation } from '../layout/orientation'
 
+interface InspectorRoute {
+  icon: string
+  label: string
+  targetRoute: RawLocation
+  matchRoute: (route: Route) => boolean
+  pluginId?: string
+}
+
 export default defineComponent({
   components: {
     AppHeaderLogo,
@@ -32,14 +41,14 @@ export default defineComponent({
 
     const { inspectors: customInspectors } = useInspectors()
 
-    const inspectorRoutes = computed(() => [
+    const inspectorRoutes = computed(() => ([
       {
         icon: 'device_hub',
         label: 'Components',
         targetRoute: { name: 'inspector-components' },
         matchRoute: route => route.matched.some(m => m.name === 'inspector-components'),
       },
-    ].concat(customInspectors.value.map(i => ({
+    ] as InspectorRoute[]).concat(customInspectors.value.map(i => ({
       icon: i.icon || 'tab',
       label: i.label,
       pluginId: i.pluginId,
@@ -128,8 +137,8 @@ export default defineComponent({
           @update="route => $router.push(route.targetRoute)"
         >
           <VueGroupButton
-            v-for="item of inspectorRoutes"
-            :key="item.id"
+            v-for="(item, index) of inspectorRoutes"
+            :key="index"
             :value="item"
             :icon-left="item.icon"
             class="flat"