How to display data from id sent from other page in vue js-CodePudding

I'm just learning vue js for a while and I'm trying to display data from api with a website case study to find an event, in the card component I managed to display the data, but when I wanted to create a page to see the details of the event I was confused. I have sent the id through the parameters in the router link, what I don't understand is how to display the data according to the id I sent.

Card.vue


<div v-for="(event, index) in events.data" :key="index" >
                        <div >
                            <div >
                                <p >{{ event.attributes.duration }} Hours</p>
                                <h5 >
                                    {{ event.attributes.title }}
                                </h5>
                                <p >{{ event.attributes.date }}</p>

                                <router-link
                                    :to="{ name: 'eventDetail', params: { id: event.id } }"
                                    
                                >
                                    View Events
                                </router-link>
                            </div>
                        </div>
                    </div>


<script>
import axios from "axios";
import { onMounted, ref } from "vue";

export default {
    name: "Cards",
    setup() {
        let events = ref([]);
        onMounted(() => {
            // Get data from api endpoint
            axios
                .get("http://localhost:1337/api/events")
                .then((result) => {
                    events.value = result.data;
                })
                .catch((err) => {
                    console.log(err.response);
                });
        });
        return {
            events,
        };
    },
};
</script>

** index.js **


{
        path: "/events/:id",
        name: "eventDetail",
        component: EventDetailView,
        props: true,
    },

EventDetail.vue


<template>
    <div >
        <div >
            <div ></div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["id"],
    data() {
        return {
            event: "",
        };
    },
    mounted() {
        fetch(`http://localhost:1337/api/events/${this.id}`)
            .then((res) => res.json())
            .then((data) => (this.event = data))
            .catch((err) => console.log(err));
    },
};
</script>

Json File

{
    "data": [
        {
            "id": 1,
            "attributes": {
                "title": "Ngoding di cafe",
                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                "date": "2022-03-25T09:00:00.000Z",
                "duration": 2,
                "price": 0,
                "createdAt": "2022-03-23T06:42:01.598Z",
                "updatedAt": "2022-03-23T15:06:40.906Z",
                "publishedAt": "2022-03-23T15:06:40.903Z"
            }
        },
        {
            "id": 2,
            "attributes": {
                "title": "Konser The Chainsmokers",
                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                "date": "2022-04-02T12:00:00.000Z",
                "duration": 4,
                "price": 500000,
                "createdAt": "2022-03-23T15:01:33.339Z",
                "updatedAt": "2022-03-23T15:06:51.994Z",
                "publishedAt": "2022-03-23T15:01:34.908Z"
            }
        },
        {
            "id": 3,
            "attributes": {
                "title": "Pameran Kucing",
                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                "date": "2022-04-05T05:40:00.000Z",
                "duration": 2,
                "price": 0,
                "createdAt": "2022-03-23T15:30:56.536Z",
                "updatedAt": "2022-03-23T15:30:58.496Z",
                "publishedAt": "2022-03-23T15:30:58.490Z"
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 3
        }
    }
}

Inside the EventDetail.vue template I have tried with this

{{ event.attributes.title }}

But then i got an error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')

CodePudding user response：

Replace

.then((data) => (this.event = data))

.then((data) => (this.event = data.data))

If you console log "data" you'll see that your actual API call results (those you are looking for) are in a nested object called data.

Edit: Interesting thing is that you did it right in Card.vue, you accessed the "data" object from the API call's results.