Question

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

此处的Codesandbox： https://codesandbox.io/s/add-poc-xznwe?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FEditPost.vue&theme=dark （单击POSTS-> EDIT（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中的每个项目，您可以使用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>

如何在v-for循环中按ID获取用户名？

1 个答案: