I want to set for select drop down list
<select name="educationOption" class="form-control">
<option>
Search for SSC Course
</option>
<option v-link="'/higherEducationDetails/'+ user_id">
Search for Higher Education
</option>
</select>I want to set for select drop down list
<select name="educationOption" class="form-control">
<option>
Search for SSC Course
</option>
<option v-link="'/higherEducationDetails/'+ user_id">
Search for Higher Education
</option>
</select>I tried this also, but not working
<select name="educationOption" class="form-control">
<option>
Search for SSC Course
</option>
<option>
<router-link :to="'/higherEducationDetails/'+ $route.params.id">
Search for Higher Education
</router-link>
</option>
</select>Any suggestion
Share Improve this question asked Mar 30, 2017 at 6:32 user5532713user5532713 2- Do you want to navigate users to selected link from drop down? – azs06 Commented Mar 30, 2017 at 7:02
- yes..user_id will be dynamic – user5532713 Commented Mar 30, 2017 at 7:24
3 Answers
Reset to default 5Edit :
router-link by default is not gonna work inside select tags however we can do some trick for example:
we can define a normal option tag :
<option>
educationOption
</option>
and add event listener on change select value:
<select name="educationOption" class="form-control" v-on:change="changeRoute">
and then add changeRoute method to our vue:
export default {
data() {
return {
id: 1
}
},
methods: {
changeRout() {
this.$router.push({path:'/educationOption/' + this.id })
}
}
}
What you are trying to achieve could be done like this.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', ponent: Foo },
{ path: '/bar', ponent: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
data: {
selected: ''
},
methods:{
changeRoute(event){
const path = event.target.value;
this.$router.push({ path: `/${path}` });
}
}
}).$mount('#app')<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<select v-model="selected" @change=changeRoute($event)>
<option disabled value="">Please select one</option>
<option value='foo'>Foo</option>
<option value='bar'>Bar</option>
</select>
<span>Selected: {{ selected }}</span>
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
<script src="https://unpkg./vue/dist/vue.js"></script>
<script src="https://unpkg./vue-router/dist/vue-router.js"></script>
</body>
</html>Doing something like this should also work for your application.
I have a trick if you have many pages.
Enter this into your template
<select id="jenis-transaksi" v-on:change="changeLink">
<option v-for="option in jenislink" v-bind:value="option.value">{{option.text}}</option>
</select>
Use the method to run it
export default{
/*Data Section
===================*/
data(){return{
jenislink: [
{text:'Transaksi Penempatan Deposito', value: '01'},
{text:'Transaksi Apa Aja', value: '02'},
]
}/*END RETURN*/
},/*END DATA*/
methods:{
// SELECT ON CHANGE //
changeLink:function(event){
if(event.target.value == '01'){
this.$router.push({path: '/administrasi/transaction' })
}
else if (event.target.value == '02'){
this.$router.push({path: '/administrasi/upload' })
}
},
},/*END METHODS*/
}/*export default =-=-=-=-=-=*/
I hope you can understand this, so in conclusion we will go to the link from the value option using that method.
How do you want selected to follow your page?
Enter this into your template
<select id="jenis-transaksi" v-on:change="changeLink">
<option v-for="option in jenislink" v-bind:value="option.value" :selected="option.location == link ? true : false">{{option.text}}</option>
</select>
Use the method to run it
export default{
/*Data Section
===================*/
data(){return{
jenislink: [
{text:'Transaksi Penempatan Deposito', value: '01', location: 'administrasi/transaction/penempatan'},
{text:'Transaksi Break Deposit', value: '02', location: 'administrasi/transaction/break'},
{text:'Transaksi Pembatalan Deposito', value: '03', location: 'administrasi/transaction/pembatalan'},
]
}/*END RETURN*/
},/*END DATA*/
/*METHODS
===========*/
methods:{
// SELECT ON CHANGE //
changeLink:function(event){
if(event.target.value == '01'){
this.$router.push({path: '/administrasi/transaction/penempatan' })
}
else if (event.target.value == '02'){
this.$router.push({path: '/administrasi/transaction/break' })
}
else if (event.target.value == '03'){
this.$router.push({path: '/administrasi/upload' })
}
},
},/*END METHODS*/
/*COMPUTED
==========*/
puted:{
link: function () {
var link = this.$route.path.toString().split('/');
return link[1]+'/'+link[2]+'/'+link[3];
},
},/*END COMPUTED*/
}/*export default =-=-=-=-=-=*/
You can test the contents of the "link" variable by typing {{link}} your template