Vue: I want to send data to another page

Question

I have a page that lists employees.

<template>
  <v-container>
    <v-card
      class="mb-6 pa-2 mx-auto rounded-lg"
      max-width="1000"
      color=""
      v-for="user in users"
      :key="user.id"
    >
      ............
          <v-btn
            class="mb-3 mt-3"
            v-on:click="sendConfirm(user.ID)"
            to="/companyApplicants/menteeListPage"
            color="green"
          >
            <v-icon>mdi-clipboard-account</v-icon>
          </v-btn>
...........
        </v-col>
      </v-list-item>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      userDatas: [],
      users: [
        {
          .....
        },
      ],
    }
  },
  mounted() {
    this.getUserData()
  },

  methods: {
    getUserData() {
      return this.$axios.$get('/api/MyMentors').then((response) => {
        this.users = response
        console.log(response)
      })
    },
  },
}
</script>

And when they press the button and go to the other page I want to send Id of the clicked mentor. I can get the Id but couldn't figure out how to send that Id to the other page

Router params can be one option. Or browser localStorage can also be used. — Kiran Parajuli, Aug 06 '22 at 12:51
Also if you use Vuex for your project you could store this value there. — Piotr Kliks, Aug 06 '22 at 12:57
@PiotrKliks Is the store data persisted on page refresh or reload or new page navigation? — Kiran Parajuli, Aug 06 '22 at 13:04
@pKiran no, this will work only when changing pages with Vue Router. — Piotr Kliks, Aug 06 '22 at 13:10
You could also emit the state up and pass it down on the other page if you have a common parent (a wrapper basically). Otherwise, you probably want some persistency indeed, check this other answer with some ways of doing so: https://stackoverflow.com/a/66872372/8816585 — kissu, Aug 06 '22 at 15:39

score 0 · Accepted Answer · answered Aug 06 '22 at 16:52

you can add the id to the route

<v-btn
  class="mb-3 mt-3"
  v-on:click="sendConfirm(user.ID)"
  :to="`/companyApplicants/menteeListPage/${user.ID}`"
  color="green"
>
  <v-icon>mdi-clipboard-account</v-icon>
</v-btn>

just need to update your route to have the data available there

{
  path: "/companyApplicants/menteeListPage/:userID",  
  name: "menteeListPage",
  component: () => import(/* webpackChunkName: "views" */ "./views/MenteeListPage.vue"),
  meta: {
    requiresAuth: true,
    title: "Menteen List Page {{userID}}",
  },
},

your variable will then be accessible in the vue components through this.$route.params.userID

If you want to make it optional for the route use ? at the end :

path: "/companyApplicants/menteeListPage/:userID?",

Vue: I want to send data to another page

1 Answers1