Bagaimana untuk melaksanakan aplikasi Vue untuk memindahkan pilihan yang dipilih ke halaman lain
P粉308089080
P粉308089080 2023-08-28 09:44:23
0
2
560
<p>Pada halaman pertama apl Vue saya, saya mempunyai menu lungsur turun yang mengandungi senarai alamat e-mel. </p> <p>Saya ingin menyimpan nilai/teks yang dipilih dan menggunakannya sebagai parameter atau pembolehubah pada halaman peti masuk yang saya tuju. </p> <p>Ini ialah kod menu lungsur turun menggunakan v-autolengkap: </p> <pre class="brush:html;toolbar:false;"><v-autolengkap padat diisi label="Pilih E-mel" v-model="peti mel" :items="peti mel" item-text='peti mel' item-value='mailbox'> </v-autolengkap> </pra> <p>Ini ialah butang yang bertindak sebagai v-btn dan digunakan untuk laluan ke halaman peti masuk. </p> <pre class="brush:html;toolbar:false;"><v-btn rounded color="primary" @click="$router.push('Peti Masuk')"> Muatkan peti mel</v-btn> </pra> <p>Bagaimanakah saya boleh menyimpan nilai peti mel yang dipilih untuk digunakan pada halaman peti masuk yang saya tuju? </p>
P粉308089080
P粉308089080

membalas semua(2)
P粉083785014

Luluskan nilai yang dipilih sebagai parameter penghalaan:

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

Dalam halaman Peti Masuk anda boleh mengakses melalui:

$route.params.selectedValue
P粉038161873

Saya syorkan anda mula menggunakan Vuex :)

Ini ialah perpustakaan yang boleh berkongsi objek data reaktif sepanjang aplikasi anda.

Berikut ialah contoh kod anda yang mungkin:

// /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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan