Code:- https://codesandbox.io/s/charming-poincare-mzy4h?file=/src/components/tabs.vue
How to keepmaintain array value from router-link to stayin localstorge even afterif page is refreshed in Vuejs?
Issue when trying How to showkeep array dynamically based on the idvalue from router-link to stay even after page is refreshed in Vuejs?
<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 } }"> {:to="{ item.cakeName }} </router-link> </div> <br /><br /><brname: />'UserWithID', <User /> <br /><br /><br /> params: { id: <divitem.cakeid class="">}, <app-tabs query: class="w-11/12{ lgcakeid:w-10/12 mx-auto"item.cakeid }, :tabList="contentList"}" variant="horizontal"> > {{ item.cakeName }} <template v-for="content in contentList" v</router-slot:[content.chefid]="">link> </div> <br {{/><br content.feedback/><br }}/> <User </template>> <br /><br </app-tabs>><br /> <<tabs /div>> </div> </template> <script> import AppTabs from "./AppTabs"; import User from "./User.vue"; import { router }tabs from "./router";tabs.vue"; import { tabsandcontentrouter } from "./tabsandcontent";router"; export default { name: "HelloWorld", components: { User, AppTabstabs, }, data() { return { items: router, contentList: tabsandcontent, }; }, }; </script><template> <div> <div v-for="(item, key) in user" :key="key"> {{ useritem.cakeName }} <br /> {{ user.total }}{{ item.cakePrice }} <br /> {{ user.total }}{{ item.total }} </div> </div> </template> <script> import { routerid } from "./routerid"; export default { name: "User", data() { return { lists: routerid, }; }, computed: { user: function () { return this.lists.findfilter((item) => { if (item.cakeid === this.$route.params.id) { return item; } }); }, }, }; </script>AppTabstabs.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<div> <div v-for="(tabitem, indexkey) in tabList" user" :key="index" class="w-full px-4 py-1.5 rounded-lg"key="key"> :class="{ 'text-white-600 bg-blue': index + 1 === activeTab, 'text-black': index + 1 !== activeTab, { item.chefname }" } <br /> <label {{ :for="tabuser.chefid" feedback }}{{ v-text="tabitem.chefname" class="cursor-pointer block" rating }} <br /> <input :id="tab.chefid" type="radio" :name="tab.chefid" :value="index + 1" v-model="activeTab" class="hidden" </>div> </li>div> </ul>template> <template v-for="(tab, index) in tabList"> <div<script> import { tabsandcontent } from :key="index""./tabsandcontent"; v-if="index + 1export ===default activeTab"{ class="flex-grow bg-white rounded-lg shadow-xlname: p-4""User", data() >{ <slot :name="index + 1"return />{ </div> lists: </template>tabsandcontent, </div> </template> <script> export default {}; props: {}, tabListcomputed: { typeuser: Array, function required:() true,{ }, return this.lists.filter((item) variant:=> { type: String, if (item.cakeid === required:this.$route.params.id) false,{ default: () => "vertical", }, return },item; data() { return {} activeTab: 1,}); };, }, }; </script>But the problem is with, last sub component.(unable to show similar to the first sub comonent) i needHow to pass query paramskeep data alive, Even after page is refreshed in Vuejs?
How to pass query params on the router-link and call the array to show relevant data basedOn clicking of routerlink, I am filtering some values based on theeach array id. (in my case, cakeid)
This is theand displaying those array which i need to call (in the code from tabsandcontent,js file need to get the data)values.
Here is the query params looks like:- tabsandcontent?sm_id=cakeidDuring this process, after array values are displayed on click of router-link same time data should change.
Below is my code sandbox, Where I have written entire logic and struggling to getif i refresh the data based on query paramspage, All the array values which is displayed previously is not getting displayed.
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 belowwant to that i have some sub component, Wherekeep data, as it is comming according(like previously clicked to state) even after page is refreshed. I think this can be handled by using the related id clicked on router-link from parent componentlocalstorage get and set items.
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 unableBut not sure where to add thatplace it.?
Code:- https://codesandbox.io/s/charming-poincare-mzy4h?file=/src/components/tabs.vue
Issue when trying to show array dynamically based on the id in Vuejs
<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><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.
How to keep array value from router-link to stay even after page is refreshed in Vuejs?
<template> <div> <div v-for="item in items" :key="item.cakeid"> <b> id: {{ item.cakeid }}</b> <router-link :to="{ name: 'UserWithID', params: { id: item.cakeid }, query: { cakeid: item.cakeid }, }" > {{ item.cakeName }} </router-link> </div> <br /><br /><br /> <User /> <br /><br /><br /> <tabs /> </div> </template> <script> import User from "./User.vue"; import tabs from "./tabs.vue"; import { router } from "./router"; export default { name: "HelloWorld", components: { User, tabs, }, data() { return { items: router, }; }, }; </script><template> <div> <div v-for="(item, key) in user" :key="key"> {{ item.cakeName }} <br /> {{ user.total }}{{ item.cakePrice }} <br /> {{ user.total }}{{ item.total }} </div> </div> </template> <script> import { routerid } from "./routerid"; export default { name: "User", data() { return { lists: routerid, }; }, computed: { user: function () { return this.lists.filter((item) => { if (item.cakeid === this.$route.params.id) { return item; } }); }, }, }; </script>tabs.vue
<template> <div> <div v-for="(item, key) in user" :key="key"> {{ item.chefname }} <br /> {{ user.feedback }}{{ item.rating }} <br /> </div> </div> </template> <script> import { tabsandcontent } from "./tabsandcontent"; export default { name: "User", data() { return { lists: tabsandcontent, }; }, computed: { user: function () { return this.lists.filter((item) => { if (item.cakeid === this.$route.params.id) { return item; } }); }, }, }; </script>How to keep data alive, Even after page is refreshed in Vuejs?
On clicking of routerlink, I am filtering some values based on each array id. and displaying those array values.
During this process, after array values are displayed on click of router-link, if i refresh the page, All the array values which is displayed previously is not getting displayed.
I want to keep data, as it is(like previously clicked to state) even after page is refreshed. I think this can be handled by using the localstorage get and set items.
But not sure where to place it.?
Code:- https://codesandbox.io/s/charming-poincare-mzy4h?file=/src/components/tabs.vue
Loading
Loading
lang-js