HelloWorld.vue
<template> <div> <b>one each Cakeid basis showing relevant content(related to only id basis)</b> <div v-for="item in items" :key="item.cakeid"> <b> id: {{item.cakeid}}</b> <router-link :to="{ name: 'UserWithID', params: { id: item.cakeid } }"> {{ item.cakeName }} </router-link> </div> <br /><br /><br /> <User /> <br /><br /><br /> <div class=""> <app-tabs class="w-11/12 lg:w-10/12 mx-auto" :tabList="contentList" variant="horizontal" > <template v-for="content in contentList" v-slot:[content.chefid]=""> {{ content.feedback }} </template> </app-tabs> </div> </div> </template> <script> import AppTabs from "./AppTabs"; import User from "./User.vue"; import { router } from "./router"; import { tabsandcontent } from "./tabsandcontent"; export default { name: "HelloWorld", components: { User, AppTabs, }, data() { return { items: router, contentList: tabsandcontent, }; }, }; </script>User.vue
<template> <div> {{ user.cakeName }} <br /> {{ user.cakePrice }} <br /> {{ user.total }} </div> </template> <script> import { routerid } from "./routerid"; export default { name: "User", data() { return { lists: routerid, }; }, computed: { user: function () { return this.lists.find((item) => item.cakeid === this.$route.params.id); }, }, }; </script>AppTabs.vue
<template> <div :class="{ 'flex space-x-4': variant === 'horizontal', }" > <ul class="list-none p-1.5 rounded-lg text-center overflow-auto whitespace-nowrap" :class="{ 'flex items-center mb-6': variant === 'vertical', }" > <li v-for="(tab, index) in tabList" :key="index" class="w-full px-4 py-1.5 rounded-lg" :class="{ 'text-white-600 bg-blue': index + 1 === activeTab, 'text-black': index + 1 !== activeTab, }" > <label :for="tab.chefid" v-text="tab.chefname" class="cursor-pointer block" /> <input :id="tab.chefid" type="radio" :name="tab.chefid" :value="index + 1" v-model="activeTab" class="hidden" /> </li> </ul> <template v-for="(tab, index) in tabList"> <div :key="index" v-if="index + 1 === activeTab" class="flex-grow bg-white rounded-lg shadow-xl p-4" > <slot :name="index + 1" /> </div> </template> </div> </template> <script> export default { props: { tabList: { type: Array, required: true, }, variant: { type: String, required: false, default: () => "vertical", }, }, data() { return { activeTab: 1, }; }, }; </script>But the problem is with, last sub component.(unable to show similar to the first sub comonent) i need to pass query params?
How to pass query params on the router-link and call the array to show relevant data based on the id. (in my case, cakeid)
This is the array which i need to call (in the code from tabsandcontent,js file need to get the data)
Here is the query params looks like:- tabsandcontent?sm_id=cakeid on click of router-link same time data should change.
Below is my code sandbox, Where I have written entire logic and struggling to get the data based on query params.
Code:- https://codesandbox.io/s/charming-poincare-mzy4h?file=/src/components/AppTabs.vue
Note:- As per my output where you can see, I have some names those are router-links. And onclick of that below to that i have some sub component, Where data is comming according to the related id clicked on router-link from parent component.
The same logic, i tried implementing for tabs also, based on parent component id click show the necessary data inside of tabs view but i am unable to add that.