javascript - 如何在v-for循环中通过id获取用户名？

Question

我正在尝试将用户名打印到 UI 中，但结果为空。

此处的代码沙箱: https://codesandbox.io/s/add-poc-xznwe?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FEditPost.vue&theme=dark(点击帖子 --> 编辑(Acme Widget)，我正在尝试让用户名显示在“当前联系人”下)

让我解释一下:

我有一个文件组件EditPost.vue，其中包含一个posts对象，其数据如下:

posts: [
        {
          post_id: 1,
          process_id: 4,
          post_name: "ACME Widget",
          poc_list: [1, 2]
        },
        {
          post_id: 2,
          process_id: 1,
          post_name: "XYZ Widget",
          poc_list: [3]
        },

poc_list 属性包含与特定帖子关联的人员的用户 ID。

还有一个 userProfiles 对象，其中包含每个用户的名称及其用户 ID，如下所示:

userProfiles: [
        {
          uid: 1,
          firstname: "Claiborne",
          lastname: "Heberden",
          email: "cheberden0@gravatar.com"
        },
        {
          uid: 2,
          firstname: "Gerick",
          lastname: "Tetla",
          email: "gtetla1@whitehouse.gov"
        },

如何在 v-for 循环中显示用户的名字？

这是我尝试过的:

EditPost.vue 模板:

        <ul v-if="$route.params.poc_list">
          <li v-for="poc in contacts" :key="poc.uid">{{poc}}</li>
        </ul>

EditPost.vue 脚本部分:

 methods: {
    contacts() {
      const contact = this.userProfiles.filter(
        poc => this.posts.poc_list === poc.uid
      );
      return contact.firstname;
    },

感谢您的帮助!

Answer 1

当你循环你的 post 对象时，当你到达 post.poc_list 循环时。对于 poc_list 中的每个项目，您在 userProfiles 列表中使用 uid 进行查找并返回名字

<div v-for="post in posts">
    {{post.post_name}}
    <div v-for="item in post.poc_list">
        {{ userProfiles.find(x => x.uid === item).firstname || '' }}
    </div>
</div>

在你的沙盒原型(prototype)中

<ul v-if="$route.params.poc_list">
    <li v-for="(poc, index) in $route.params.poc_list" :key="index">
        {{ userProfiles.find(x => x.uid === poc).firstname || '' }}
    </li>
</ul>