Vuejs3 + Axios + Express - Display data from array/object

Question

I am trying to output a single post from an express API using Vue.

Problem is that the object/array returned (post.value) does not display the values that I declare in the template (post.title & post.body).

Any help 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>

Just for reference:

console.log(params.value) got no errors, and outputs the following:

Proxy {0: {…}}[[Handler]]: Object[[Target]]: Array(1)[[IsRevoked]]: false

UPDATE I was able to output the variables, but with the help of a v-for loop. Just wondering if there's another way to output it without using a loop. I was able to make it work using Vue + firebase, but not on this stack.

@AidenDean just an ugly habit that I'm still not used to (using axios). — Carabao Coder
– Carabao Coder, Commented Oct 22, 2022 at 15:11
@OFRBG I think not, even if I remove the catch block it still outputs the same console log — Carabao Coder
– Carabao Coder, Commented Oct 23, 2022 at 12:48

Turtle · Accepted Answer · 2022-10-24 14:33:26Z

Since your API is returning an array with one post, you can just store the post without the array around it.

<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({}) // make this an object
        const route = useRoute()
        const error = ref('')

        const load = async (id) => {
            
            try {
                const response = await axios.get(`http://localhost:5000/api/posts/${id}`)
                post.value = response.data[0] // Get the first item from the array
                console.log(post.value)
                console.log(response.data) 
            } catch(err) {
                error.value = err.message
            }            
        }

        load(route.params.id)

        return { post, error }
    }
}
</script>

Collectives™ on Stack Overflow

Vuejs3 + Axios + Express - Display data from array/object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related