VUEJS VUTSTRAP에 중첩된 개체 표시

VUEJS VUTSTRAP에 중첩된 개체 표시

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: {...},
....
]

그것은 단지 구조를 보여주기 위한 표본일 뿐이다.보시다시피 속성 중에 user{}라는 다른 개체가 있다.나는 이 물건에 포함된 속성만 표시하면 된다.이 새로운 api(속성으로 객체가 없는)를 받기 전에 사용하던 테이블의 구조를 유지하고 싶다.

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

템플릿은 다음과 같아야 한다.

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

data.item사용자 배열 오브젝트에 있는 단일 사용자여야 하며.user개체 속성 사용자의 속성에 액세스할 수 있어야 함. (추가 정보로 이동)data.item.user.first_name, 등, 그 안에 있는 단일 속성에 접근하는 것).제가 무엇을 빠뜨리고 있나요?화면에는 아무것도 렌더링되지 않는다.그러나 콘솔에 오류가 없다.대본에는 다음과 같은 내용이 수록되어 있다.

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

그러면 중첩된 개체의 속성을 표시하는 템플릿을 어떻게 작성해야 하는가?또한, 지시는v-if="users && users.length > 0"B-테이블은 계속 작동해야겠죠?그것은 여전히 배열이지만 이번에는 사물이다.내가 틀렸다면 고쳐줘.감사합니다.

점 표기법으로 중첩된 필드 키를 지정할 수 있다.

export default {
  data() {
  return {
    users: [],
    fields: [
      { key: 'id', label: 'ID'},
      { key: 'user.first_name', label: 'First Name' },
      { key: 'user.last_name', label: 'Last Name' }
    ]
  }
}

@Troy Morehouse가 시사한 바와 같이 필드의 정의를 그대로 다시 정의하기만 하면 되었다.

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

**@artworkjpm 설명 후 업데이트:HTML 코드는 다음과 같아야 한다.

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

**필드 변경은 최소하지만 개념은 동일함:

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

도움이 되길 바래.xx

데이터를 얻기만 하면 원하는 자산을 추출하여 이 경우 로컬로 저장할 수 있으며, 다음과 같이 보일 수 있다.

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

필드 정의에서 포맷터를 사용하면 다음과 같이 쉽게 할 수 있다.

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>

포맷터는 지정된 키나 값을 자동으로 인쇄한다.

참조URL: https://stackoverflow.com/questions/57870766/vuejs-display-nested-object-in-b-table-vue-bootstrap