如何在vue js中显示从其他页面发送的id的数据

Question

我刚刚学习 vue js 一段时间，我试图通过网站案例研究显示来自 api 的数据以查找事件，在我设法显示数据的卡片组件中，但是当我想创建一个页面来查看事件的详细信息时，我感到很困惑。我已经通过路由器中的参数发送了idlink，我不明白的是如何根据我发送的id显示数据。

Card.vue


<div v-for="(event, index) in events.data" :key="index" class="me-3">
                        <div class="card border-0">
                            <div class="card-body">
                                <p class="card-text">{{ event.attributes.duration }} Hours</p>
                                <h5 class="card-title text-white">
                                    {{ event.attributes.title }}
                                </h5>
                                <p class="card-text">{{ event.attributes.date }}</p>

                                <router-link
                                    :to="{ name: 'eventDetail', params: { id: event.id } }"
                                    class="btn btn-sm rounded btn-primary mt-3"
                                >
                                    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 class="container">
        <div class="row">
            <div class="col"></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 文件

{
    "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
        }
    }
}

在 EventDetail.vue 模板中我已经尝试过这个

{{ event.attributes.title }}

但是我得到一个错误

未捕获（承诺）TypeError：无法读取未定义的属性（读取 'title'）

Answer 1

替换

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

来自

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

如果您控制台记录“数据”，您会看到您的实际 API 调用结果（您正在寻找的结果）在一个名为数据的嵌套对象中。

编辑：有趣的是，您在 Card.vue 中做对了，您从 API 调用的结果中访问了“数据”对象。

如何在vue js中显示从其他页面发送的id的数据

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

api

json

vue.js

vuejs3