vue.js - 如何将用户 ID 附加到 Vue Data 对象中的链接

Question

我正在尝试使用 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.jsgoogle-cloud-firestorevuexvuetify.js

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