So implementieren Sie die Vue-Anwendung, um ausgewählte Optionen auf eine andere Seite zu übertragen

Question

Auf der ersten Seite meiner Vue-App habe ich ein Dropdown-Menü mit einer Liste von E-Mail-Adressen.

Ich möchte den ausgewählten Wert/Text speichern und ihn als Parameter oder Variable auf der Posteingangsseite verwenden, zu der ich weitergeleitet werde.

Dies ist der Code für das Dropdown-Menü mit v-autocomplete:

<v-autocomplete dicht
  gefüllt
  label="E-Mail auswählen"
  v-model="Postfächer"
  :items="Postfächer"
  item-text='mailbox'
  item-value='mailbox'>
</v-autocomplete>

Dies ist eine Schaltfläche, die als v-btn fungiert und zur Weiterleitung zur Posteingangsseite verwendet wird.

<v-btnrounded color="primary"
  @click="$router.push('Inbox')">
Postfach laden</v-btn>

Wie speichere ich den Wert eines ausgewählten Postfachs zur Verwendung auf der Posteingangsseite, zu der ich weitergeleitet werde?

Answer 1

将选定的值作为路由参数传递：

$router.push({
    name: "Inbox",
    params: { selectedValue: YOUR_VALUE }
  });

在收件箱页面中，您可以通过以下方式访问：

$route.params.selectedValue

Answer 2

我建议你开始使用Vuex :)

这是一个可以在整个应用程序中共享响应式数据对象的库。

以下是你可能的代码示例：

// /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="选择邮箱"
        :items="mailboxes"
        item-text='mailbox'
        item-value='mailbox'>
      </v-autocomplete>
</template>

<script>
export default {
   computed: {
      mailboxes: {
         get() {
            this.$store.state.mailbox // 从Vuex存储中获取值
         },
         set(newMailbox) {
            this.$store.commit('SET_MAILBOX', newMailbox) // 更新Vuex存储
         },
      }
   }
}
</script>