通过 ID Vuejs 从对象数组传递数据答案

【问题标题】：Pass Data from Array of objects by ID Vuejs通过 ID Vuejs 从对象数组传递数据
【发布时间】：2020-03-06 09:51:33
【问题描述】：

我有 2 个 .vue 页面（列表、详细信息）现在在列表中，我列出了这样的对象数组，我从 API 获取它们

[{...},{...},{...}]

我使用 v-for 在列表中显示它

我在每个列表中都有详细信息按钮

当我点击详细信息时，我会将对象的 ID 路由到详细信息页面

我可以在控制台中打印 ID，我可以在 .vue 中打印它使用：$this.route.params.ID;

但我无法获取 ID = $this.route.params.ID; 的其他数据

我已经尝试了 3 天......

 <div
  class="col-lg-12 col-md-12 col-xs-12 pa-4 ma-4"
  v-for="(cmpd, index) in Compounds"
  :key="cmpd.id"
>
  <v-card
    class="mx-auto"
    :flat="flat"
    :loading="loading"
    :outlined="outlined"
    :elevation="elevation"
    :raised="raised"
  >
    <v-img
      v-if="media"
      class="white--text"
      height="250px"
              >
      <v-card-title class="align-end fill-height">
        {{cmpd.name}} ({{cmpd.city}})
        <router-link :to="{ name: 'CompoundDetails', params: { CompoundID: 
   cmpd.id }}">
          <v-btn text>Details</v-btn>
        </router-link>
      </v-card-title>
    </v-img>
    <v-card-title v-else>{{cmpd.name}}</v-card-title>
    </div>

【问题讨论】：

请出示您的路由器文件
{ 路径：“/CompoundDetails/:CompoundID”，名称：“CompoundDetails”，组件：CompoundDetails }，
我认为你走错了路.../list/:CompoundID因为你来自列表页面
Vuetify 还提供了 :to 支持 v-card，以便代替 router-link
你的参数被命名为CompoundID，不是 ID所以你应该使用this.$route.params.CompoundID

标签： vue.js axios vuetify.js

【解决方案1】：

我看到您使用CompoundID: cmpd.id 传递ID。但是你想要所有的对象和信息，对吧？那么为什么不传递整个对象呢？ params: { Compound: cmpd }。然后你就拥有了整个对象。

如果您使用的是 Vuex，您也可以将它放在商店中，以便从任何地方访问。

【讨论】：