Question

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

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

并且我使用v-for将其显示在列表中

并且每个列表中都有“详细信息”按钮

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

我可以在控制台中打印ID，也可以在.vue中打印ID 使用：$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从对象数组传递数据

1 个答案: