如何在VueJS的<router-link>中给出动态URL？

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