48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<template>
|
|
<div class="ui list">
|
|
<!-- Loop through the infos -->
|
|
<div class="item" v-for="info in infos">
|
|
<div class="header">{{ info.header }}</div>
|
|
<!-- if we have a link, make it a clickable object -->
|
|
<template v-if="info.link">
|
|
<router-link :to="info.link">
|
|
{{ info.content }}
|
|
</router-link>
|
|
</template>
|
|
<!-- if our content object is an array, loop through it and show its content -->
|
|
<template v-else-if="Array.isArray(info.content)">
|
|
<template v-for="(infoitem, index) in info.content">
|
|
<!-- if we have a link, make it a clickable object -->
|
|
<template v-if="infoitem.link">
|
|
<router-link :to="infoitem.link">
|
|
{{ infoitem.content }}
|
|
</router-link>
|
|
</template>
|
|
<!-- Otherwise show its content -->
|
|
<template v-else>
|
|
{{infoitem.content}}
|
|
</template>
|
|
<template v-if="info.content.length > (index + 1)">, </template>
|
|
</template>
|
|
</template>
|
|
<!-- Otherwise show its content -->
|
|
<template v-else>
|
|
{{ info.content }}
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'List',
|
|
props: {
|
|
infos: Array
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|