"Nuxt.js: Pass ID using URL"

Question

I want to get the user ID, so I have a dropdown button =

<v-menu
  transition="slide-y-transition"
  bottom
  offset-y
>
  <template v-slot:activator="{ on, attrs }" >
    <v-btn
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >
      list
    </v-btn>
  </template>
  <v-list>
    <v-list-item
      v-for="(item, index) in items"
      :key="index"
      :to="item.url"
    >
      <v-list-item-title>{{item.title}}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

And this data:

<script>
export default {
  data: () => ({
      items: [
      {
        title: 'User List',
        url: ''/user/function/listUser/${route.params.id}`'
      },
      {
        title: 'User Structure',
        url: ''/user/function/structUser/${route.params.id}`'
      }
    ]
  })
}
</script>

My intention is to send the user ID. This way, I can actually get

via route.params.id

url: ''/user/function/structUser/${route.params.id}`'

Not working, what did I do wrong?

Answer 1

1. The template string only uses backticks, but your string uses both single quotes and backticks.

The

2. replacement value (route.params.id) refers to a route variable that appears to be undefined in your example. I think you want to access this.$route, so the actual replacement should be this.$route.params.id

itemsThe array should look like this:

export default {
  data() {
    return {
      items: [
        {
          title: 'List User',
          url: `/user/function/listUser/${this.$route.params.id}`
        },
        {
          title: 'structure User',
          url: `/user/function/structUser/${this.$route.params.id}`
        }    
      ]
    }
  }
}

Demo

Answer 2

This is an example

`/user/function/structUser/${this.$route.params.id}`

Also, maybe try using it inside a computed as it may not be a computed property.