0

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.

1
  • Please always tag vue2 or vue3 since Vue answers are highly version specific. Regardless, keep-alive is really meant to be used with the special component element where <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. Commented Mar 26, 2024 at 16:49

1 Answer 1

0

Have you tried saving the value of the filters in the local storage with vuex or pinia (depending on your case) so that when you return to the previous page you can take those values by default?

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.