来自 V-TAB vuetify 上的 API 的数据，使用 axios get vue js答案

【问题标题】：Data from an API on a V-TAB vuetify, with axios get vue js来自 V-TAB vuetify 上的 API 的数据，使用 axios get vue js
【发布时间】：2020-05-26 05:24:58
【问题描述】：

我正在尝试推广 V-TAB，其中每个选项卡都将根据此图像具有其特定数据：我想将数据放入 TAB PROFILE 中，属性为：firstName、lastName、email、phone 等。在 TAB SERVICES 中是数组服务的数据，这两个是从这个 JSON 对象中提取的：

[
    {
        "id": 1,
        "firstName": "Ana",
        "lastName": "Lucia",
        "phone": "(11)99989-8989",
        "mobilePhone": "(11)99989-8989",
        "email": "aninha@gmail.com",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "inativo"
        },
        "services": [
            {
                "name": "progressiva"
            },
            {
                "name": "Manicure"
            }
        ]
    }
]

我对如何使用 v-tab 组件执行此过程有疑问，如下代码取自 vuetify：

<template>
  <v-container grid-list-xl fluid >
    <v-layout row wrap>
      <v-flex sm12>
        <v-row
          class="mb-6"
          justify="center"
        >
          <v-col sm="10">
            <v-card>
              <v-tabs
                v-model="tab"
                fixed-tabs
                background-color="pink lighten-1"
                dark
              >
                <v-tab
                  v-for="item in items"
                  :key="item.tab"
                >
                  {{ item.tab }}
                </v-tab>
              </v-tabs>

              <v-tabs-items v-model="tab">
                <v-tab-item
                  v-for="item in items"
                  :key="item.tab"
                >
                  <v-row justify="center">
                    <v-col sm="6">
                      <v-card flat>
                        <v-card-text class="body-1">{{ item.content }}</v-card-text>
                      </v-card>
                    </v-col>
                  </v-row>
                </v-tab-item>
              </v-tabs-items>
            </v-card>
          </v-col>
        </v-row>

      </v-flex>
    </v-layout>
  </v-container>
</template>


<script>
import axios from 'axios'
  export default {
    data () {
      return {
        tab: null,
        employee: [],
        items: [
          { tab: 'Comissões', content: 'Aqui vai os dados de COMISSÕES' },
          { tab: 'Desempenho', content: 'Aqui vai os dados de DESEMPENHO' },
          { tab: 'Serviços', content: 'Aqui vai os dados de SERVIÇOS' },
          { tab: 'Agendamentos', content: 'Aqui vai os dados de AGENDAMENTO' },
          { tab: 'Histórico', content: 'Aqui vai os dados de HISTÓRICO' },
          { tab: 'Perfil', content: 'Aqui vai os dados de PERFIL' },

        ],
      }
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
          axios.get('http://192.168.26.130:3000/employee/1')          
            .then(response => {
            console.log(response.data);
          });
      },
    },
  }
</script>

我对如何将内容放在某些选项卡中感到困惑，因为例如，如果我将以下内容放在此摘录中：

{ tab: 'Perfil', content: 'employee' },

它将准确地呈现“员工”这个词，我想呈现 OBJECT '员工'中包含的内容，然后按照这个想法，填写其他 TABS。我已经尝试修改 html 摘录：

<v-card-text class="body-1">{{ employee }}</v-card-text>

因此，FULL OBJECT 'employee' 在没有任何格式的情况下呈现，并且在所有选项卡中，如图所示：谁能帮帮我？

【问题讨论】：

标签： javascript ajax api vue.js vuetify.js

【解决方案1】：

        <script>
    import axios from 'axios'
      export default {
        data () {
          return {
            tab: null,
            employee: [],
            services: [],
            items: [
              { tab: 'Comissões', content: 'Aqui vai os dados de COMISSÕES' },
              { tab: 'Desempenho', content: 'Aqui vai os dados de DESEMPENHO' },
              { tab: 'Serviços', content: services },
              { tab: 'Agendamentos', content: 'Aqui vai os dados de AGENDAMENTO' },
              { tab: 'Histórico', content: 'Aqui vai os dados de HISTÓRICO' },
              { tab: 'Perfil', content: employee },

            ],
          }
        },

        created () {
          this.initialize()
        },

        methods: {
          initialize () {
              axios.get('http://192.168.26.130:3000/employee/1')          
                .then(response => {
                  console.log(response.data);
                  this.employee = response.data
                  this.services = this.employee.services
                  delete this.employee.services
              });
          },
        },
      }
    </script>

不要忘记将数据作为对象而不是数组获取（如果您使用的是 mongoose，请使用 findOne 或 findById）

【讨论】：

【解决方案2】：

据我了解，您希望在每个 V-TAB 中显示不同的内容，并且您希望显示 V-TAB 的 JSON 数据，请查看 Vuetify 文档，关于 JSON，这可以帮助您

https://vuetifyjs.com/en/components/data-tables/#data-tables

【讨论】：