Vue를 사용하여 Express API에서 하나의 게시물을 출력하려고 합니다.
문제는 반환된 오브젝트/어레이(post.value)가 템플릿에서 선언한 값(post.title & post.body)을 표시하지 않는다는 것입니다.
어떤 도움이라도 주시면 감사하겠습니다.
<template> <div v-if="post">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p> </div> </template>
<script> import axios from 'axios' import { ref } from 'vue' import { useRoute } from 'vue-router'
export default {
name: 'BlogPostView',
setup() {
const post = ref([])
const route = useRoute()
const error = ref('')
const load = async (id) => {
try {
await axios.get(`http://localhost:5000/api/posts/${id}`)
.then((response) => {
post.value = response.data
console.log(post.value)
console.log(response.data)
})
} catch(err) {
error.value = err.message
}
}
load(route.params.id)
return { post, error }
} } </script> 참고용:
console.log(params.value)에 오류가 없으며 다음 출력이 있습니다.
Proxy {0: {…}}[[Handler]]: Object[[Target]]: Array(1)[[IsRevoked]]: false 업데이트 v-for 루프의 도움으로 변수를 출력할 수 있었습니다.루프를 사용하지 않고 출력할 수 있는 다른 방법이 있는지 궁금해서요.Vue + Firebase를 사용하여 동작할 수 있었지만, 이 스택에서는 동작하지 않았습니다.