62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<template>
|
|
<div class="productions-container">
|
|
<production-card
|
|
v-for="production in productions" :key="production.title" :image-url="production.image_url"
|
|
:name="production.title" :description="production.summary" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
const { find } = useStrapi()
|
|
|
|
const baseUrl = 'http://192.168.86.5:1337';
|
|
|
|
class ProductionInfo {
|
|
title: string;
|
|
summary: string;
|
|
image_url: string;
|
|
|
|
constructor(title: string, summary: string, image_url: string) {
|
|
this.title = title;
|
|
this.summary = summary;
|
|
this.image_url = baseUrl + image_url;
|
|
}
|
|
}
|
|
|
|
interface StrapiProduction {
|
|
title: string;
|
|
summary: string;
|
|
production_image?: {
|
|
url: string;
|
|
};
|
|
}
|
|
|
|
const productions = ref<ProductionInfo[]>();
|
|
|
|
onMounted(async () => {
|
|
const response = await find<StrapiProduction>('productions', {
|
|
populate: '*',
|
|
})
|
|
productions.value = response.data.map((item: StrapiProduction) => {
|
|
return new ProductionInfo(
|
|
item.title,
|
|
item.summary,
|
|
item.production_image?.url || ''
|
|
);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.productions-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
</style> |