**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>I am currently working on implementing dynamic routing. The goal is to display specific array values linked with the dynamic ID when clicked. For example, clicking on "id:1" should only show array values related to that specific ID.
However, the current issue I'm facing is that clicking on any ID value displays the entire array list instead of the specific values associated with that ID.
1
11 potter 22 james 55 limda 77 stepen
The complete working code can be found here: https://codesandbox.io/s/proud-fast-sokui?file=/src/components/HelloWorld.vue