Bagaimana untuk mendapatkan senarai nilai tatasusunan secara dinamik berdasarkan 'id' dalam 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>

Saya sedang mengusahakan penghalaan dinamik dengan klik pada setiap nilai tatasusunan, saya mendapat "id" secara dinamik. (Seperti 1,2,3,4,5...)

Sekarang saya mahu memaparkan nilai tatasusunan. Khusus kepada id sahaja. Suka...

Jika saya klik pada id:1 maka saya hanya perlu mendapatkan nilai tatasusunan khusus dipautkan ke id:1. Situasi yang sama untuk 2, 3, 4...

Masalahnya sekarang ialah jika saya klik pada "id array:2" atau mana-mana nilai id.. maka saya akan mendapat keseluruhan senarai nilai tatasusunan.

1

11 Tembikar 22 Yakobus 55 Lin 77 darjah

Kod berfungsi penuh:- https://codesandbox.io/s/proud-fast-sokui?file=/src/components/HelloWorld.vue

Answer 1

Anda boleh mencari maklumat pengguna yang anda perlukan melalui User.vue中的$route.params.id. Contoh User.vue:

  {{ item }}

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

Demo kodesandbox