HelloWorld.vue
<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>User.vue
<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.?
