如何在 vue 的详细信息页面上显示数据？

Question

我有一个显示所有啤酒列表的啤酒列表页面。 我制作了一个按钮，应该链接到特定啤酒的详细信息页面

在路由器中，我为此做了一个路由：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/:beerId/BeerDetails",
    name: "BeerDetails",

    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../components/BeerDetails.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

在 Beers 组件中，我创建了链接

<template>
  <div class="container">
    <b-card
      v-bind:key="beer.id"
      v-for="beer in beers"
      :img-src="beer.image_url"
      :alt="beer.name"
      img-top
      tag="article"
      style="max-width: 22rem  ;"
      class="mb-2"
    >
      <b-card-text class="c-text">
        <h4 class="title">{{ beer.name }}</h4>
        <p>{{ beer.ingredients.malt[0].name }}</p></b-card-text
      >

      <router-link :to="{ name: 'BeerDetails', params: { beerId: beer.id } }">
        <b-button variant="primary">View Beer details</b-button></router-link
      >
    </b-card>
  </div>
</template>
<script>
export default {
  components: {},
  name: "Beers",
  props: ["beers"],
};
</script>

所以当我点击按钮并查看 vue 开发工具时，它会告诉我 props 是 beerId

但是当我做 {{beerId.name}} 时，我无权访问任何其他属性 那么有人可以告诉我我做错了什么以及如何解决它吗？

Answer 1

嗯，你传递的是一个 ID（很可能是一个 INT）而不是一个对象。

 params: { beerId: beer.id }

因此您可以访问一个没有属性的整数（ID）。 如果你想访问所有的属性，你应该传递和对象

 params: {beerId: beer.id, beer: beer }

仅传递 ID，如果您在第二个请求中加载特定的啤酒详细信息（例如，当啤酒页面被挂载时），则有意义