56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<!-- media -->
|
|
<div class="h-64 w-auto md:w-1/2">
|
|
<img
|
|
class="inset-0 h-full w-full object-cover object-center"
|
|
src="/build/images/tracer_schmolle150x150.png"
|
|
alt=""
|
|
>
|
|
</div>
|
|
<!-- content -->
|
|
<div class="w-full py-4 px-6 text-gray-800 flex flex-col justify-between">
|
|
<h3 class="font-semibold text-lg leading-tight truncate">
|
|
{{ post.title }}
|
|
</h3>
|
|
<p class="mt-2">
|
|
{{ post.body.split('.')[0] }} …
|
|
</p>
|
|
<p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
|
|
{{ post.createdAt.toLocaleString('de-DE') }}
|
|
</p>
|
|
<p v-if="blogUser">
|
|
{{ blogUser }}
|
|
</p>
|
|
<p class="font-normal text-gray-700 mb-3">
|
|
dddd
|
|
</p>
|
|
<router-link
|
|
:to="{ name: 'BlogPost', params: { id: post.id } }"
|
|
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
|
|
font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
|
|
>
|
|
Read more
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import useResource from '@/composables/useResource'
|
|
|
|
const props = defineProps({
|
|
post: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
const post = { ...props.post }
|
|
|
|
const { items: blogUser, fetchOne } = useResource('users')
|
|
fetchOne(post.user)
|
|
|
|
console.log("blug user", post.user)
|
|
console.log(blogUser.value)
|
|
</script>
|