VUEJS在< b-table>中显示嵌套对象VUE引导程序 [英] VUEJS Display nested object in <b-table> VUE-BOOTSTRAP

问题描述

我有一个通过api请求获得的对象(用户)数组.它的结构是这样的:

I have an array of objects (users) gotten by an api request. Its structure is something like this:

api response: (5) [{…}, {…}, {…}, {…}, {…}]

在此数组中，对象如下:

Inside this array, the objects are like this:

0: {
   user_address_string: ('Street 1')
   id: (3)
   avatar: (img')
   ...
   user: {
     id: 1
     first_name: 'Lucas'
     last_name: 'Smith'
   }
},
1: {...},
2: {...},
....
]

这只是一个示例，只是为了向您展示结构. 如您所见，在其属性中还有一个名为 user {} 的对象. 我只需要显示此对象中包含的属性. 在获得这个新的api(没有对象作为属性)之前，我想保留我正在使用的表的结构.

It is just a sample just to show you the structure. As you can see, among its properties there's another object named user{}. I need to display only the properties contained in this object. I would like to keep the structure of the table I was using before I got this new api (which didn't have objects as properties).

<b-table
  responsive
  v-if="users && users.length > 0"
  :fields="fields"
  :items="users"
>

模板应该是这样的:

<template slot-scope="data">
   {{ data.item.user }}
</template> 

data.item应该是对象的用户数组中的单个用户，并且使用.user，我应该能够访问其对象属性 user 的属性. (进一步data.item.user.first_name等，以访问其中的单个属性).我想念什么? 屏幕上没有呈现任何内容. 控制台中没有错误. 在脚本中，我有:

data.item should be the single user in the users array of objects, and with .user I should be able to access the properties of its object property user. (Going further data.item.user.first_name, etc, to access the single properties in it). What am I missing? Nothing is rendered on the screen. No errors in the console though. In the script I have:

users: [],
fields: [
      { key: 'id', label: 'ID'},
      { key: 'name', label: 'Name' }
]

那么，我该如何编写用于显示嵌套对象属性的模板? 另外，b表中的指令v-if="users && users.length > 0"仍然应该起作用，对吗?它仍然是一个数组，但是这次是对象.如果我错了，请纠正我. 谢谢

So, how should I write the template for displaying the nested object’s properties? Also, the directive v-if="users && users.length > 0" in the b-table should still work, right? It is still an array, but of objects this time. Please correct me if I am wrong. Thank you

推荐答案

按照@Troy Morehouse的建议，我只需要将字段定义重新定义为

As @Troy Morehouse suggested, I just needed to redefine the fields definition as

{ key: 'user.first_name', label: 'First name' } 

** @artworkjpm评论后的更新: HTML代码应如下所示:

**UPDATE after @artworkjpm comment: The HTML code should be something like this:

<b-table
   v-if="users && users.length > 0 && !isLoading"
   id="table-transition-userList"
   :key="users.id"
   responsive
   :tbody-tr-class="userStatus"
   :tbody-transition-props="transProps"
   :fields="fields"
   :items="users"
>
   <template
      v-slot:cell(fullName)="data"
   >
      {{ data.item.user.first_name }} {{ data.item.user.last_name }}
   </template>
   <template
      v-slot:cell(buttons)="data"
   >
      <b-button
         v-b-tooltip.hover
         title="See plan"
         class="btn-plan p2"
         variant="primary"
         :disabled="!data.item.user.is_active"
         @click.prevent="seePlan(data.item), selectUser(data.item)"
      >
         <span class="svg-container">
            <svg-icon icon-class="route" />
         </span>
      </b-button>
   </template>
</b-table>

**字段中的微小变化，但概念相同:

**Minor change in fields, but the concept is the same:

fields: [
        { key: 'fullName', label: 'User' },
        { key: 'buttons', label: 'Operations' }
      ],

希望它会有所帮助. xx

Hope it helps. xx

这篇关于VUEJS在< b-table>中显示嵌套对象VUE引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！