This is what looks like to be a very simple matter but for some reason I couldn't find a clear answer on how to do it.
I have 2 pages : users page that contains a list of users displayed in a v-data-table with search and filters. When I click on one of the users from the list, it opens the second page user details page that contains details of the user.
Let's say in the users page I use an age filter that shows me users with age 30+ and I click on the first user to see his details, when I go back to the users page the filters are restored back to neutral and I have to filter again from scratch. It's very annoying to have to set the filters again every time I want to see one user's details so I'm trying to look for a way to keep them in their current state while I navigate between users.
Here's what the users page looks like :
<template>
<v-card height="100%">
<v-container>
<v-row>
<v-app-bar>
<v-row>
<v-col cols="10">
Users
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-card>
<v-card-title>
<v-row>
<v-col cols="8">
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search users"
single-line
hide-details
solo
light
dense
rounded
clearable></v-text-field>
</v-col>
<v-col cols="2">
<v-select
v-model="filterType"
:items="typeList"
item-text="lib"
item-value="value"
label="Type"
light
solo
dense
clearable></v-select>
</v-col>
<v-col cols="2">
<v-select
v-model="filterAge"
:items="ageList"
item-text="lib"
item-value="value"
label="Age"
light
solo
dense
clearable></v-select>
</v-col>
</v-row>
</v-card-title>
<v-container>
<v-data-table
v-model="selectedUsers"
item-key="id"
:headers="headers"
:items="displayedData"
:options.sync="options"
:loading="loading"
:search="search"
@click:row="clickRow"
show-select>
</v-data-table>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
import moment from 'moment'
export default {
methods & data ...
clickRow(item) {
this.$router.push({
name: 'users-id___' + this.$i18n.localeProperties.code,
params: {
id: item.id,
},
})
},
}
</script>
And this is what the user details page looks like, I use $router.back() to navigate back to the previous page :
<template>
<v-card height="100%">
<v-container>
<v-row>
<v-app-bar>
<v-row>
<v-col cols="8">
<v-icon dark @click="$router.back()"> mdi-arrow-left </v-icon>
<v-icon large left>mdi-badge-account-horizontal</v-icon>
User {{ badgename }}
</v-col>
</v-row>
</v-app-bar>
</v-row>
<v-card-text>
user details here ...
</v-card-text>
</v-container>
</v-card>
</template>
<script>
import moment from 'moment'
export default {
methods & data ...
</script>
I tried using <keep-alive> with no success, I didn't knew exactly where nor how to use it.
Is there a clean way I can naviguate between users while keeping values of the filters in the users page? Thank you in advance.
<component>can dynamically switch between two or more components. It's sometimes used instead of having separate routes. It's probably not worth refactoring to use, especially since I see you tagged vuex. You can save the users component state in your vuex store and have the component load it's initial state based on what is in vuex.