38 lines
938 B
Vue
38 lines
938 B
Vue
<template>
|
|
<div v-for="(cityList, distance) in distanceList" :key="distance">
|
|
{{ distance }}칸 떨어진 도시:
|
|
<template v-for="(cityID, key) in cityList" :key="key">
|
|
<template v-if="key !== 0">, </template>
|
|
<a :style="{ color: colorMap[distance] ?? undefined, textDecoration:'underline' }" @click="$emit('selected', cityID)">{{
|
|
citiesMap.get(cityID)?.name
|
|
}}</a>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from "vue";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
distanceList: {
|
|
type: Object as PropType<Record<number, number[]>>,
|
|
required: true,
|
|
},
|
|
citiesMap: {
|
|
type: Object as PropType<Map<number, { name: string }>>,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: ['selected'],
|
|
data() {
|
|
return {
|
|
colorMap: {
|
|
1: "magenta",
|
|
2: "orange",
|
|
3: "yellow",
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|