Vuejs2 VUEJS在<；中显示嵌套对象；b表>；VUE-BOOTSTRAP

我有一个通过api请求获得的对象（用户）数组。它的结构是这样的：

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

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

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

data()
  return {
    users: []
    }
    methods: {
     async getUsersFromApi(){
        const { data: {users }} = await axios.get(...)
        users.map(user => {
           this.users.push(user.user)
        }

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

在该阵列中，对象如下所示：

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

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

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

data()
  return {
    users: []
    }
    methods: {
     async getUsersFromApi(){
        const { data: {users }} = await axios.get(...)
        users.map(user => {
           this.users.push(user.user)
        }

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

这只是一个示例，只是为了向您展示结构。 如您所见，在其属性中有另一个名为user{}的对象。 我只需要显示此对象中包含的属性。 我希望保留我在得到这个新api（它没有对象作为属性）之前使用的表的结构

那么，我应该如何编写显示嵌套对象属性的模板呢？ 另外，b表中的指令

v-if=“users&&users.length>0”

应该仍然有效，对吗？它仍然是一个数组，但这次是对象的数组。如果我错了，请纠正我。

---

感谢您

无论您在哪里获取数据，都可以提取所需的属性并保存在本地。在这种情况下，它看起来像这样：

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

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

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

data()
  return {
    users: []
    }
    methods: {
     async getUsersFromApi(){
        const { data: {users }} = await axios.get(...)
        users.map(user => {
           this.users.push(user.user)
        }

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

---

正如@Troy Morehouse所建议的，我只需要将字段定义重新定义为

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

**@artworkjpm注释后更新： HTML代码应该如下所示：

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

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

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

data()
  return {
    users: []
    }
    methods: {
     async getUsersFromApi(){
        const { data: {users }} = await axios.get(...)
        users.map(user => {
           this.users.push(user.user)
        }

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

希望能有帮助。

---

xx

您可以使用点符号指定嵌套字段键：

导出默认值{
数据（）{
返回{
用户：[]，
字段：[
{键：'id'，标签：'id'}，
{key:'user.first_name'，标签：'first name'}，
{key:'user.last_name'，label:'last name'}
]
}
}

一种简单的方法是在字段定义中使用格式化程序：

data() {
    return {
       fields: [
          {
            key: "avg_score",
            label: this.$t("avgScore"),
            sortable: true,
            sortByFormatted: true,
            formatter: (value, key, item) => item.stats.avg_score?.text 
          },
       ],
       items: [...your item list]
    }
}

在模板中：

<b-table :items="items" :fields="fields"></b-table>

---

格式化程序将自动打印指定的键或值。

是的，我在created中创建了它：

created（）{const currentUser=this.$store.getters.currentUser const profileData=this.$store.getters.profileData this.currentUser=currentUser this.profileData=profileData

只需在模板上正确显示它们，可能遵循我已有的逻辑。将字段定义定义为

{key:'user.first_name'，label:'first name'}

Bam！谢谢@Troy，就是这样！刚刚将它作为一个答案发布在下面。查看表格html代码会很有帮助，我仍在努力获得我的工作。我更新了答案，请检查。希望你能尽快完成。xx