Question

我正在使用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>

Answer 1

您需要绑定to。尝试类似

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

Answer 2

您需要像其他变量属性一样绑定选择名称：使用v-bind:to或简写形式:to。

以下是v-bind的文档：https://vuejs.org/v2/api/#v-bind

您还可以将对象直接绑定到to指令，并沿路径名传递，因此您需要连接路径。像这样：

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

Answer 3

好吧，为了使任何属性动态化，您需要使用v-bind指令。

v-bind的速记属性为:

因此，您可以按以下方式使用它

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

速记

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

官方v绑定doc

希望有帮助！

如何在VueJS的<router-link>中提供动态URL？

3 个答案: