编辑：

Question

我想设置选择下拉列表

<select name="educationOption" class="form-control">
          <option>
            Search for SSC Course
          </option>
          <option v-link="'/higherEducationDetails/'+ user_id">
              Search for Higher Education
          </option>
</select>

我也试过了，但没有工作

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

任何建议

Answer 1

编辑：

router-link默认情况下不会在select标签内工作但是我们可以做一些技巧，例如：

我们可以定义一个普通的选项标签：

<option>
   educationOption
</option>

并在更改选择值上添加事件侦听器：

 <select name="educationOption" class="form-control" v-on:change="changeRoute">

然后将changeRoute方法添加到我们的vue：

export default {
        data() {
            return {
                id: 1
            }
        },
        methods: {
            changeRout() {
                this.$router.push({path:'/educationOption/' + this.id })
            }
        }
    }

Answer 2

你想要实现的目标可以这样做。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

执行此类操作也适用于您的应用程序。

Answer 3

如果您有很多页面，我有个窍门。

将此输入到您的模板中

<select id="jenis-transaksi" v-on:change="changeLink">
    <option v-for="option in jenislink" v-bind:value="option.value">{{option.text}}</option>
</select>

使用该方法运行

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 =-=-=-=-=-=*/

我希望您能理解这一点，因此，总而言之，我们将使用该方法进入value选项的链接。

您希望如何选择关注页面？

将此输入到您的模板中

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

使用该方法运行

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 =-=-=-=-=-=*/

您可以通过键入{{link}}您的模板来测试“ link”变量的内容

在vue js2.0中为选择列表设置路由器链接

3 个答案:

编辑：

如果您有很多页面，我有个窍门。

您希望如何选择关注页面？