將選定選項傳輸至另一頁的Vue應用程式實作方法
P粉308089080
P粉308089080 2023-08-28 09:44:23
0
2
552
<p>在我的Vue應用的第一頁,我有一個包含郵箱清單的下拉式選單。 </p> <p>我想保存選擇的值/文本,並將其作為參數或變數在我路由到的收件匣頁面上使用。 </p> <p>這是使用v-autocomplete的下拉式選單代碼:</p> <pre class="brush:html;toolbar:false;"><v-autocomplete dense filled label="選擇信箱" v-model="mailboxes" :items="mailboxes" item-text='mailbox' item-value='mailbox'> </v-autocomplete> </pre> <p>這是一個作為v-btn的按鈕,用於路由到收件匣頁面。 </p> <pre class="brush:html;toolbar:false;"><v-btn rounded color="primary" @click="$router.push('Inbox')"> 載入郵箱</v-btn> </pre> <p>如何保存所選郵箱的值以在路由到的收件匣頁面上使用? </p>
P粉308089080
P粉308089080

全部回覆(2)
P粉083785014

將選定的值作為路由參數傳遞:

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

在收件匣頁面中,您可以透過以下方式存取:

$route.params.selectedValue
P粉038161873

我建議你開始使用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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板