传输选定选项至另一页面的Vue应用程序实现方法
P粉308089080
P粉308089080 2023-08-28 09:44:23
[Vue.js讨论组]
<p>在我的Vue应用的第一页,我有一个包含邮箱列表的下拉菜单。</p> <p>我想保存选择的值/文本,并将其作为参数或变量在我路由到的收件箱页面上使用。</p> <p>这是使用v-autocomplete的下拉菜单代码:</p> <pre class="brush:html;toolbar:false;">&lt;v-autocomplete dense filled label=&quot;选择邮箱&quot; v-model=&quot;mailboxes&quot; :items=&quot;mailboxes&quot; item-text='mailbox' item-value='mailbox'&gt; &lt;/v-autocomplete&gt; </pre> <p>这是一个作为v-btn的按钮,用于路由到收件箱页面。</p> <pre class="brush:html;toolbar:false;">&lt;v-btn rounded color=&quot;primary&quot; @click=&quot;$router.push('Inbox')&quot;&gt; 加载邮箱&lt;/v-btn&gt; </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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号