Trying to display a single post fetched from an express API using Vue has been challenging.
The issue lies in the fact that the values declared in the template for post.title & post.body are not being displayed as expected when accessing post.value.
If anyone could offer some assistance, it would be greatly appreciated.
<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>
For your information:
While console.log(params.value) does not show any errors and displays the following:
Proxy {0: {…}}[[Handler]]: Object[[Target]]: Array(1)[[IsRevoked]]: false
UPDATE Although I managed to output the variables using a v-for loop, I am curious if there is an alternative method to achieve this without a loop. I was successful with Vue + firebase, but facing challenges on this particular stack.