0

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

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

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;

在啤酒组件中，我建立了链接

<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 开发工具时，它显示道具是 beerId

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

4

1 回答 1

0

好吧，您传递的是一个 ID（很可能是一个 INT）而不是一个对象。

 params: { beerId: beer.id }

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

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

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

于 2020-06-30T16:59:36.260 回答