Как дать динамический URL в <router-link> в VueJS? - PullRequest
Новая
       2

Как дать динамический URL в <router-link> в VueJS?

0 голосов
/ 01 апреля 2019

Я использую директиву v-for для получения имени URL.Однако я сталкиваюсь с трудностями при передаче значения, полученного из экземпляра v-for, в качестве имени URL. 

<template>
  <v-list-tile class="pl-5" v-for="choice in choices" :key="choice.name">
    <v-list-title-content>
      <router-link to="'/' + choice.name">
        <v-list-title-title class="white--text headline">
          {{choice.name}}
        </v-list-title-title>
      </router-link>
    </v-list-title-content>
  </v-list-tile>
</template>

<script>
export default{
  data(){
    return{
      choices:[
         name:'A',
         name:'B',
         name:'C',
         name:'D'
      ]    
    }
  }
}
</script>

Ответы [ 3 ]

3 голосов
/ 01 апреля 2019

Вам необходимо связать to.Попробуйте что-то вроде этого 

<router-link :to="'/' + choice.name">
0 голосов
/ 01 апреля 2019

Что ж, чтобы сделать любые атрибуты динамическими, вам нужно использовать директиву v-bind.

Сокращенное свойство для v-bind равно :

Следовательно, вы можете использовать его, как показано ниже 

<router-link v-bind:to="'/' + choice.name">

С короткой рукой 

<router-link :to="'/' + choice.name">

Официальный v-bind Документ

Надеюсь, это поможет!

0 голосов
/ 01 апреля 2019

Вам необходимо связать имя выбора как любое другое свойство переменной: используйте v-bind:to или сокращенную форму :to.

Вот документы на v-bind: https://vuejs.org/v2/api/#v-bind

Вы также можете напрямую привязать объект к директиве to, передавая имя маршрута, так что вам нужно указать путь. Как это: 

<router-link :to="{ name: 'choice1' }">Link</router-link>
...