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

Question

我有 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>

Answer 1

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

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

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

Pass Data from Array of objects by ID Vuejs

vue.js

axios

vuetify.js