How to append user ID to link within Vue Data object

Question

I am trying to append the users ID to a link using Vuetify. To minimise HTML markup, I have the links in an array which I access using a v-for loop. I cannot seem to add the data to the end of the string.

The data is accessible from the rest of the component using {{user.uid}}.

Here is my data object:

data: () => ({
      drawer: false,
      items: [
        { title: 'Home', link: '/' },
        { title: 'Profile', link: '/profile/{{user.uid}}' }
      ],
    }),

computed: {
      ...mapState({
        user: state => state.user.user
      })
    },

Here is my loop section:

<template v-for="item in items">
   <v-list-item :key="item.title" :to="item.link">

The link should show 'profile/SEADpZAC5uYthxmHsOhNQeKb2XA3', however it is literally printing 'profile/{{user.uid}}' instead of appending the id.

Hopefully it is just a syntax issue! Disclaimer: I am still very much a beginner...

Thanks!

Answer 1

That's a static value it should be dynamic using the following syntax :

<v-list-item :key="item.title" :to="item.link === '/profile/' ?
                                    item.link + user.uid: 
                                    item.link ">

 data: () => ({
     ...
       {
         title: 'Profile',
         link: '/profile/'
       }
    ...
  }),
 computed: {
    ...mapState({
     user: state => state.user.user
    })
  },