fix: update selector keys for duplicate options (#509)
diff --git a/src/views/components/common/trace-select.vue b/src/views/components/common/trace-select.vue
index 39ecc0d..0efb27e 100644
--- a/src/views/components/common/trace-select.vue
+++ b/src/views/components/common/trace-select.vue
@@ -52,8 +52,8 @@
class="rk-trace-opt ell"
@click="handleSelect(i)"
:class="{ active: i.key === value.key }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
>
{{ i.label }}
</div>
@@ -64,10 +64,11 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Option } from '@/types/global';
@Component
export default class TraceSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public value!: any;
+ @Prop() public data!: Option[];
+ @Prop() public value!: Option;
@Prop() public title!: string;
@Prop({ default: false }) public hasSearch!: boolean;
@Prop({ default: false })
@@ -75,7 +76,7 @@
public search: string = '';
public visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
public handleSelect(i: any) {
this.$emit('input', i);
diff --git a/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
index d5b82e6..cd0cc32 100644
--- a/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
+++ b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
@@ -54,8 +54,8 @@
<EndpointOpt
@handleSelect="handleSelect"
:class="{ active: i.key === current.key }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
:data="i"
/>
</div>
@@ -67,11 +67,12 @@
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Action } from 'vuex-class';
import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
+ import { Option } from '@/types/global';
@Component({ components: { EndpointOpt } })
export default class ToolBarEndpointSelect extends Vue {
@Action('GET_SERVICE_ENDPOINTS') private GET_SERVICE_ENDPOINTS: any;
- @Prop() private data!: any;
- @Prop() private current!: any;
+ @Prop() private data!: Option[];
+ @Prop() private current!: Option;
@Prop() private title!: string;
@Prop() private icon!: string;
@Prop() private currentService: any;
@@ -79,7 +80,7 @@
private visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
private handleOpen() {
this.visible = true;
diff --git a/src/views/components/dashboard/tool-bar/tool-bar-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-select.vue
index 2ea02d3..10289f9 100644
--- a/src/views/components/dashboard/tool-bar/tool-bar-select.vue
+++ b/src/views/components/dashboard/tool-bar/tool-bar-select.vue
@@ -49,8 +49,8 @@
class="rk-dashboard-opt ell"
@click="i.disabled ? () => {} : handleSelect(i)"
:class="{ active: i.key === current.key, disabled: i.disabled }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
>
{{ i.label }}
</div>
@@ -61,17 +61,18 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Option } from '@/types/global';
@Component
export default class ToolBarSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
+ @Prop() public data!: Option[];
+ @Prop() public current!: Option;
@Prop() public title!: string;
@Prop() public icon!: string;
@Prop({ type: Boolean, default: true }) public selectable!: boolean;
public search: string = '';
public visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
public handleOpen() {
this.visible = true;
diff --git a/src/views/components/topology/topo-select.vue b/src/views/components/topology/topo-select.vue
index deb044f..8ddc96f 100644
--- a/src/views/components/topology/topo-select.vue
+++ b/src/views/components/topology/topo-select.vue
@@ -46,8 +46,8 @@
class="rk-topo-opt ell"
@click="handleSelect(i)"
:class="{ active: i.key === current.key }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
>
{{ i.label }}
</div>
@@ -58,16 +58,17 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Option } from '@/types/global';
@Component
export default class TopoSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
+ @Prop() public data!: Option[];
+ @Prop() public current!: Option;
@Prop() public title!: string;
@Prop() public icon!: string;
public search: string = '';
public visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
public handleOpen() {
this.visible = true;