32 lines
937 B
Vue
32 lines
937 B
Vue
<script setup lang="ts">
|
|
import { apiBase } from '~/helpers';
|
|
import type { ApiTypeExternal } from '~/helpers';
|
|
|
|
type ExternalNameType = { [s: string]: string; }
|
|
|
|
const props = defineProps(['id'])
|
|
const id = props.id
|
|
const external_elements = useState<ExternalNameType>('external_elements', () => { return {} })
|
|
const name = ref()
|
|
|
|
const loadOneElement = async (id: string) => {
|
|
external_elements.value[id] = 'loading'
|
|
const data = await $fetch<ApiTypeExternal>(`${apiBase}/element/external/id/${id}`)
|
|
external_elements.value[id] = data.Description
|
|
name.value = external_elements.value[id]
|
|
}
|
|
|
|
if (external_elements.value[id]) {
|
|
name.value = external_elements.value[id]
|
|
} else {
|
|
await loadOneElement(id)
|
|
}
|
|
watch(external_elements, () => {
|
|
if (name.value !== external_elements.value[id]) {
|
|
name.value = external_elements.value[id]
|
|
}
|
|
}, { deep: true })
|
|
</script>
|
|
<template>
|
|
{{ name }}
|
|
</template> |