时间戳

首页 > 解决方案 > Vue-Router 在选择选项中不起作用

vue.js - Vue-Router 在选择选项中不起作用

问题描述

II 尝试从选择选项创建一个简单的导航，但没有结果。 <router-link>在里面不起作用<select><option>

这是我尝试过的：

Vue

  <div>
    <select v-model="selected">
      <option v-for="orga in organisations" :key="orga.name">
        <router-link :to="{name: 'Box', params: {orga: orga.route}}">
          {{ orga.name }}
        </router-link>
      </option>
    </select>
  </div>

javascript

  data() {
    return {
      selected: this.$route.params.orga,
      organisations: [
        { name: "Abc", route: "abc" },
        { name: "Lmn", route: "lmn" },
        { name: "Xyz", route: "xyz" }
      ]
    };
  }

标签： vue.jsselectvue-routerrouteroption

解决方案

如果要根据select选项更改视图，则不能router-link在选项标签内使用。

但是，您可以通过如下所示的解决方法来实现此目的。在这里，我们将根据select选项切换视图并更改路线。

Vue.component('compA', {
  template: '<div>{{name}}</div>',
  data() {
    return {
      name: 'Component A'
    }
  }
})

Vue.component('compB', {
  template: '<div>{{name}}</div>',
  data() {
    return {
      name: 'Component B'
    }
  }
})

const routes = [{
    path: '/a',
    component: {
      template: '<compA/>'
    }
  },
  {
    path: '/b',
    component: {
      template: '<compB/>'
    }
  }
];

const router = new VueRouter({
  routes
})

new Vue({
  el: "#app",
  data() {
    return {
      selected: ''
    }
  },
  router,
  methods: {
    routeChange: function(e) {
      this.$router.push(e.target.value)
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <div>
    <select @change="routeChange">
      <option></option>
      <option v-for="(c, i) in ['a', 'b']" :key="i">
        {{ c }}
      </option>
    </select>
  </div>
  <router-view/>
</div>

但是这种情况也可以通过动态组件来实现。文档对此进行了更多解释，可用于在组件或动态渲染之间切换。

Vue.component('CompA', {
  template: '<div>new component A</div>'
})

Vue.component('CompB', {
  template: '<div>new component B</div>'
})

new Vue({
  el: "#app",
  data() {
    return {
      value: ""
    }
  },
  template: `
  <div>
  <select v-model="value">
    <option v-for="c in ['compA', 'compB']">{{c}}</option>    
  </select>
  <component :is="value" />
  </div>
  `
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<div id="app"></div>

推荐阅读