En la primera página de mi aplicación Vue , tengo un menú desplegable que contiene una lista de buzones.
Me gustaría guardar el valor/texto de la selección y usarlo como parámetro o variable en la página de la bandeja de entrada a la que me dirigí.
Aquí está el código desplegable usando v-autocomplete :
<v-autocomplete dense filled label="Choose Mailbox" v-model="mailboxes" :items="mailboxes" item-text='mailbox' item-value='mailbox'> </v-autocomplete> Aquí está el botón como v-btn que dirige a la página de la bandeja de entrada.
<v-btn rounded color="primary" @click="$router.push('Inbox')"> Load Mailbox</v-btn>¿Cómo guardo el valor del buzón seleccionado para usarlo en la página de la Bandeja de entrada enrutada?
Te sugiero que empieces con Vuex :)
Es una biblioteca que comparte un objeto de datos reactivos en toda la aplicación.
Esto es lo que podría parecer para usted:
// /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>Pasando el valor seleccionado como parámetro de ruta:
$router.push({ name: "Inbox", params: { selectedValue: YOUR_VALUE } });En la página Bandeja de entrada, puede acceder a ella a través de:
$route.params.selectedValueOtra solución fácil es usar el almacenamiento local del navegador. Almacenamiento del lado del cliente de Vue