WelcomeWorld.vue
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" }
];
<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 />
<User />
</div>
</template>
<script>
import User from "./User.vue";
import { dataList } from "./dataList";
export default {
name: "WelcomeWorld",
components: {
User,
},
data() {
return {
items: dataList,
};
},
};
</script>User.vue
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import WelcomeWorld from "./components/WelcomeWorld.vue";
import book from "./components/book.vue";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: "/", name: "User", component: WelcomeWorld },
{ path: "/", name: "BookWithID", component: book },
{ path: "/:id", name: "UserWithID", component: WelcomeWorld }
]
});
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App)
}).$mount("#app");export const dataListTwo = [
{ id: 1, book: "steel", pen: "p1", gap: "1" },
{ id: 2, book: "iron", pen: "jp2", gap: "5" },
{ id: 3, book: "platinium", pen: "p3", gap: "2" },
{ id: 4, book: "gold", pen: "p4", gap: "9" }
];<template>
<div>
<router-link :to="{ name: 'BookWithID' }">
{{ user.book }}
</router-link>
</div>
</template>
<script>
import { dataListTwo } from "./dataListTwo";
export default {
name: "User",
components: {},
data() {
return {
lists: dataListTwo,
};
},
computed: {
user: function () {
return this.lists.find((item) => item.id === this.$route.params.id);
},
},
};
</script>In the dataListTwo.js, I have array values such as steel and pen. I want to call both of them together like steel/pen as an API call in the mounted().
When I click on the router-link, {{ user.book }} from the User.vue component.
For example, I want to pass the pen/gap array values as query parameters when clicked on {{ user.book }} from the User.vue component. Please go through CodeSandbox once. I tried adding a computed property for pen and gap, but pen/gap are not calling dynamically.
Here is my code: https://codesandbox.io/s/new-hill-6yum4o?file=/src/components/User.vue