52 lines
1022 B
Vue
52 lines
1022 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="blogPost"
|
||
|
|
class="
|
||
|
|
flex
|
||
|
|
m-2
|
||
|
|
gap-2
|
||
|
|
items-center
|
||
|
|
shadow-md
|
||
|
|
w-1/4
|
||
|
|
flex-grow
|
||
|
|
rounded
|
||
|
|
overflow-hidden
|
||
|
|
"
|
||
|
|
style="border: 1px solid #eee"
|
||
|
|
>
|
||
|
|
BlogIPost
|
||
|
|
<img
|
||
|
|
src="https://via.placeholder.com/150"
|
||
|
|
style="background: #cccccc"
|
||
|
|
width="150"
|
||
|
|
height="150"
|
||
|
|
alt="placeholder"
|
||
|
|
>
|
||
|
|
user {{ blogPost.userId }}:
|
||
|
|
<div v-if="user">
|
||
|
|
"{{ user.name }}
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
{{ blogPost.title }}<br>
|
||
|
|
{{ blogPost.body }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { watch } from 'vue'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
import useResource from '@/composables/useResource'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts')
|
||
|
|
fetchOneBlog(route.params.id)
|
||
|
|
|
||
|
|
const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
|
||
|
|
watch(
|
||
|
|
() => ({ ...blogPost.value }),
|
||
|
|
() => fetchOneUser(blogPost.value.userId)
|
||
|
|
)
|
||
|
|
|
||
|
|
</script>
|