如何将用户 ID 附加到 Vue Data 对象中的链接答案

【问题标题】：How to append user ID to link within Vue Data object如何将用户 ID 附加到 Vue Data 对象中的链接
【发布时间】：2020-01-08 23:17:52
【问题描述】：

我正在尝试使用 Vuetify 将用户 ID 附加到链接。为了最大限度地减少 HTML 标记，我将链接放在一个数组中，我使用 v-for 循环访问该数组。我似乎无法将数据添加到字符串的末尾。

可以使用 {{user.uid}} 从组件的其余部分访问数据。

这是我的数据对象：

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

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

这是我的循环部分：

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

该链接应显示“profile/SEADpZAC5uYthxmHsOhNQeKb2XA3”，但实际上是打印“profile/{{user.uid}}”而不是附加 ID。

希望这只是语法问题！免责声明：我仍然是一个初学者......

谢谢！

【问题讨论】：

这是用vue-router吗？
是的，使用 vue-router。路由设置为采用如下 ID： path: '/profile/:id',
“最小化 HTML 标记” ????听起来这不是最好的主意，如果它只是妨碍你的话。
你可能是对的。认为可能有一个明显的解决方案。

标签： vue.js google-cloud-firestore vuex vuetify.js

【解决方案1】：

这是一个静态值，它应该是动态的，使用以下语法：

<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
    })
  },

【讨论】：

这会弄乱 OP 的 "Home" 链接