CODEWITHSUNDEEP
javascripthtmlvue.js
user5532713
user5532713

Reputation:

Set router link for select list in vue js2.0

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

Upvotes: 1

Views: 7175

Answers (3)

ExteraDex
ExteraDex

Reputation: 21

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
==========*/
computed:{
    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

Upvotes: 0

azs06
azs06

Reputation: 3517

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', component: Foo },
  { path: '/bar', component: 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.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</body>
</html>

Doing something like this should also work for your application.

Upvotes: 0

Amr Aly
Amr Aly

Reputation: 3905

Edit :

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 })
            }
        }
    }

Upvotes: 5

Related Questions