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

【问题标题】：How to get names of users by id in a v-for loop?如何在 v-for 循环中通过 id 获取用户名？
【发布时间】：2020-02-05 05:33:15
【问题描述】：

我正在尝试将用户名打印到 UI 中，但它是空的。

这里的代码沙盒： https://codesandbox.io/s/add-poc-xznwe?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FEditPost.vue&theme=dark （单击 POSTS --> EDIT（Acme 小部件），我正在尝试让用户名显示在“当前联系人”下）

让我解释一下：

我有一个文件组件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;
    },

感谢您的帮助！

【问题讨论】：

您的poc_list 是数组类型，在contacts 方法中，您将数组与uid 进行比较。
@VidhyutPandya 好的，我该如何解决？
@redshift 您将遍历 posts 数组并在单个 poc_list 项目中搜索，并查看其中是否有任何 includes poc.uid 正在过滤列表。
@YomS。可以提供样品吗？

标签： javascript vue.js

【解决方案1】：

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

<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>

在您的沙盒原型中

<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>

【讨论】：