Wie erhalte ich dynamisch eine Liste von Array-Werten basierend auf „id“ in Vuejs?

Question

**User.vue**

<template>
  <div>
    <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div>
  </div>
</template>

<script>
import { datalist } from "./datalist";
export default {
  name: "User",
  data() {
    return {
      lists: datalist,
    };
  },
};
</script>

**datalist.js**

export const datalist = [
  { id: 1, val: "11", kk: "potter" },
  { id: 2, val: "22", kk: "james" },
  { id: 3, val: "55", kk: "limda" },
  { id: 4, val: "77", kk: "stepen" }
];

**HelloWorld.vue**

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
        {{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />

    <b> {{ $route.params.id }}</b>
    <User />
  </div>
</template>

<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default {
  name: "HelloWorld",
  components: {
    User,
  },
  data() {
    return {
      items: datalist,
    };
  },
};
</script>

Ich arbeite an dynamischem Routing, bei dem ich beim Klicken auf jeden Array-Wert die „ID“ dynamisch erhalte. (Wie 1,2,3,4,5...)

Jetzt möchte ich die Array-Werte anzeigen. Nur spezifisch für die ID. Wie...

Wenn ich auf id:1 klicke, muss ich nur den spezifischen Array-Wert abrufen, der mit id:1 verknüpft ist. Ähnliche Situationen für 2, 3, 4...

Das Problem im Moment ist, dass ich die gesamte Liste der Array-Werte erhalte, wenn ich auf "Array-ID:2" oder einen beliebigen ID-Wert klicke.

1

11 Potter 22 Jakobus 55 Lin 77 Grad

Vollständig funktionsfähiger Code: – https://codesandbox.io/s/proud-fast-sokui?file=/src/components/HelloWorld.vue

Answer 1

您可以通过User.vue中的$route.params.id找到所需的用户信息。 示例 User.vue：

  {{ item }}

...
computed: {
  user: function () {
    return this.lists.find((item) => item.id === this.$route.params.id);
  },
}

演示 codesandbox