**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> <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>Estoy trabajando en el enrutamiento dinámico, donde al hacer clic en cada valor de matriz, obtengo la "id" dinámicamente (como 1,2,3,4,5 ......)
Ahora quiero mostrar los valores de la matriz. específico para la identificación solamente. me gusta...
si hago clic en id: 1 , entonces necesito obtener solo los valores de matriz específicos que están vinculados solo con id: 1 . Similaridad para 2,3,4....
En este momento, el problema es que si hago clic en "array id: 2" o en cualquier valor de id ... entonces obtengo la lista completa de valores de matriz.
111 alfarero 22 james 55 limda 77 stepen
Código de trabajo completo: - https://codesandbox.io/s/proud-fast-sokui?file=/src/components/HelloWorld.vue
Puede encontrar la información de usuario necesaria en $route.params.id en User.vue . Ejemplo User.vue :
<div v-for="(item, key) in user" :key="key"> {{ item }} </div> ... computed: { user: function () { return this.lists.find((item) => item.id === this.$route.params.id); }, }códigos de demostraciónandbox