39 lines
648 B
Vue
39 lines
648 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="
|
||
|
|
flex
|
||
|
|
m-2
|
||
|
|
gap-2
|
||
|
|
items-center
|
||
|
|
shadow-md
|
||
|
|
w-1/4
|
||
|
|
flex-grow
|
||
|
|
rounded
|
||
|
|
overflow-hidden
|
||
|
|
"
|
||
|
|
style="border: 1px solid #eee"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="https://via.placeholder.com/150"
|
||
|
|
style="background: #cccccc"
|
||
|
|
width="150"
|
||
|
|
height="150"
|
||
|
|
alt="placeholder"
|
||
|
|
>
|
||
|
|
<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
|
||
|
|
{{ post.title }}<br>
|
||
|
|
User: {{ post.userId }}
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
console.log('BlogCard')
|
||
|
|
const props = defineProps({
|
||
|
|
post: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const post = { ...props.post }
|
||
|
|
</script>
|