Vue -Маршрутизатор не работает в опции выбора - PullRequest
Новая
       89

Vue -Маршрутизатор не работает в опции выбора

0 голосов
/ 10 июля 2020

Я пытаюсь создать простую навигацию из выбранного варианта, но безрезультатно. <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" }
      ]
    };
  }

1 Ответ

0 голосов
/ 10 июля 2020

Если вы хотите изменить вид на основе параметра 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>

Но этот сценарий альтернативно может быть реализован с помощью динамических c компонентов. docs объясняет больше об этом, что можно использовать для переключения между компонентами или динамическим c рендерингом. 

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