如何使用 vuetify 在 vue 中显示两个数据库表中的数据答案

【问题标题】：how to show data from two database tables in vue with vuetify如何使用 vuetify 在 vue 中显示两个数据库表中的数据
【发布时间】：2020-09-21 06:27:17
【问题描述】：

我有一个客户列表，其中包含一个绑定到数据库中用户 ID 的销售员字段，¿我如何在表中显示与其 ID 对应的用户名？

<v-data-table :headers="headers" :items="arrayClientes">
  <template v-slot:item.user_id="{ item }" :items="userLists">
          <span>{{item.user_id}}</span>
  </template>

脚本：

computed: {  
      userLists() {
        return this.$store.state.user.users;
      },
    },
    created(){
        this.$store.dispatch('user/getUsers')
    },

【问题讨论】：

你好赫克托，欢迎来到堆栈。为了更容易回答您的问题，您能否分享user 对象的数据方案以及$store.dispatch() 函数的外观。假设用户名是架构的一部分，您能否解释一下如果简单地将跨度更改为`item.username}}`会发生什么。

标签： php laravel vue.js vuex vuetify.js

【解决方案1】：

你可以尝试创建一个方法，过滤特定的用户id，返回用户对象。

例如：

export default {
  methods: {
    getUser(id) {
      return this.userLists.filter((user) => user.id === id))[0];
    },
  },
};

之后，您可以简单地在您的 span 标签中调用此方法并将用户 ID 指定为参数。

注意：这不会检查用户 ID 是否存在于用户列表中。

【讨论】：

谢谢它如你所见。另外，你知道如何不返回整个对象而只返回对象的特定属性吗？我试图实现显示属性“名称”，它是一个字符串
是的，您可以通过执行 getUser(123).username 或直接在方法中访问该用户的用户名（如果它存在于对象中） ...[0].username

【解决方案2】：

你可以这样试试

getUser(id) {
     return this.userLists.filter(user => user.id === id).map(user => user.name)[0];
},

我希望它对你有用，问候！

【讨论】：