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

Posted 2023-02-22

【中文标题】如何使用 vuetify 在 vue 中显示两个数据库表中的数据

【英文标题】：how to show data from two database tables in vue with vuetify

【发布时间】：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`会发生什么。

【参考方案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];
,

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