On the first page of my Vue application, I have a drop-down menu that contains a list of mailboxes.
I would like to save the value/text of the selection and use it as a parameter or variable on the Inbox page that I routed to.
Here is the drop-down code using v-autocomplete:
<v-autocomplete dense
filled
label="Choose Mailbox"
v-model="mailboxes"
:items="mailboxes"
item-text='mailbox'
item-value='mailbox'>
</v-autocomplete>
Here is the button as v-btn that routes to the Inbox page.
<v-btn rounded color="primary"
@click="$router.push('Inbox')">
Load Mailbox</v-btn>
How do I save the selected mailbox value to use on the routed-to Inbox page?
I suggest you to get started with Vuex :)
It's a library that share a reactive data object across the whole app.
Here is what it could look like for you:
// /store/index.js
export state: () => {
mailbox: '',
}
export mutation: () => {
SET_MAILBOX(state, mailbox) {
state.mailbox = mailbox
}
}
// your-page.vue
<template>
<v-autocomplete
v-model="mailboxes"
dense
filled
label="Choose Mailbox"
:items="mailboxes"
item-text='mailbox'
item-value='mailbox'>
</v-autocomplete>
</template>
<script>
export default {
computed: {
mailboxes: {
get() {
this.$store.state.mailbox // Get the value from the Vuex store
},
set(newMailbox) {
this.$store.commit('SET_MAILBOX', newMailbox) // Update the Vuex store
},
}
}
}
</script>
Passing the selected value as a route parameter:
$router.push({
name: "Inbox",
params: { selectedValue: YOUR_VALUE }
});
In the Inbox page, you can access it through:
$route.params.selectedValue
Other easy solution is to use browser local storage. Vue Client-Side Storage