[英]Show hidden div element based on option selected in select option element
[英]Vue: How to change route based on selected option, AND also show the default selected option in a <select> element?
我可以根據我的 Dropdown 組件中選擇的選項更改路線。 但是,選擇菜單沒有顯示正確的 onChange 選定值。
這是我的組件:
<template>
<select v-model="accountMenuOption" @change="onChange()">
<option value="/">Page 1</option>
<option value="/2">Page 2</option>
<option value="/3">Page 3</option>
</select>
</template>
<script>
export default {
name: 'AccountDropdown',
data() {
return {
accountMenuOption: '/',
};
},
methods: {
onChange() {
this.$router.push(this.accountMenuOption);
},
},
};
</script>
當我選擇第二個選項時,路線更改為/2
,這很棒。 但是,一旦路由發生變化,選擇元素不會通過將默認選定值顯示為“第 2 頁”來更新。 它只是繼續將“第 1 頁”顯示為所選值。 如何在路由更改后相應地更新 select 元素的默認選定值?
它工作正常,如下例所示:
Vue.config.devtools = false; Vue.config.productionTip = false; const Page1 = { template: '<div>page 1</div>' } const Page2 = { template: '<div>page 2</div>' } const Page3 = { template: '<div>page 3</div>' } const routes = [{ path: '/', component: Page1 }, { path: '/2', component: Page2 }, { path: '/3', component: Page3 } ] const router = new VueRouter({ routes }) new Vue({ el: '#app', router, data() { return { accountMenuOption: '/', }; }, methods: { onChange() { this.$router.push(this.accountMenuOption); }, }, })
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app" class="container"> <select v-model="accountMenuOption" @change="onChange()"> <option value="/">Page 1</option> <option value="/2">Page 2</option> <option value="/3">Page 3</option> </select> <router-view></router-view> </div>
我最終通過在組件導出中添加以下內容解決了這個問題:
created() {
// Make sure the correct option is shown on load
this.accountMenuOption = this.$router.history.current.fullPath;
},
watch: {
// Watch for route changes
$route(route) {
// Change the value of the selected option
this.accountMenuOption = route.path;
},
},
我是 Vue 的新手,所以不確定為什么這能解決我的問題,但確實如此。 如果有人想解釋,請隨意。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.