使用 axios get 在 Datatable Vuetify 中获取数据

Question

我想显示来自 get axios api 的数据，当我检查端点时正确调用它 returns 一个包含对象的数组，但在数据表中它说没有数据.

<template>
<v-app>
  <v-card>
    <v-card-title>
      Usuários
      <v-spacer></v-spacer>
      <v-btn
              color="primary"
              @click="criarUsuario"
            >
            Criar Usuário
            </v-btn><v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
    ></v-data-table>
  </v-card>
  <div
      ref="modal"
      class="modal fade"
      :class="{show}"
      tabindex="-1"
      role="dialog"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Criação de usuário</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="criarUsuario"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form v-on:submit.prevent="cadastroUsuario">
            <div class="mb-3">
              <label for="formName" class="form-label">Nome</label>
              <input class="form-control" type="text" v-model="nome" id="nome">
            </div>
            <div class="mb-3">
              <label for="formSobrenome" class="form-label">Sobrenome</label>
              <input class="form-control" v-model="sobrenome" type="text" id="sobrenome">
            </div>
            <div class="mb-3">
              <label for="formLogin" class="form-label">Login</label>
              <input class="form-control" v-model="login" type="text" id="login">
            </div>
            <div class="mb-3">
              <label for="formEmail" class="form-label">E-mail</label>
              <input class="form-control" v-model="email" id="email" type="text">
            </div>
            <div class="mb-3">
              <label for="formSenha" class="form-label">Senha</label>
              <input class="form-control" v-model="nova_senha" id="nova_senha" type="password">
            </div>
            <div class="mb-3">
              <label for="formCPF" class="form-label">CPF</label>
              <input class="form-control" v-model="cpf" id="cpf" type="text">
            </div>
            <div class="mb-3">
              <button type="submit" class="btn btn-primary pull-right">Cadastrar</button>
            </div>
            </form>
            </div>
        </div>
      </div>
    </div>
  </div>
  </v-app>
</template>

<script>
import ActionButtonsUsers from "./Components/ActionButtonsUsers.vue"
import axios from "axios"

  export default {
    name: 'Usuarios',
    data () {
      return {
        search: '',
    user: [],
        errors: [],
        show:false,
        headers: [
          {
            text: 'Código',
            align: 'start',
            value: 'sociedade_id',
          },
          { text: 'Nome', value: 'sociedade_name' },
          { text: 'Login', value: '' },
          { text: 'CPF', value: '' },
          { text: 'Ações', value: 'actions', component: ActionButtonsUsers },
        ],
    desserts: this.user,
      }
    },
    methods: {
        criarUsuario() {
        console.log(this.user[0]['sociedade_id']);
            setTimeout(() => (this.show = !this.show), 10);
        },
        cadastroUsuario(){
                this.criarUsuario()
                axios.post(process.env.VUE_APP_Back+"/usuarios", ({
                  nome: this.nome,
                  sobrenome: this.sobrenome,
                  login: this.login,
                  email: this.email,
                  nova_senha: this.nova_senha,
                  cpf: this.cpf
                }))
                    .then((res) => {
                        res.send("Cadastro com sucesso!")
                        this.criarUsuario()
                    })
                    .catch((error) => {
                        console.log(error)
                        this.criarUsuario()
                    }).finally(() => {
                        this.criarUsuario()
                    });
            }
    },
    created: function(){
                   axios.get(process.env.VUE_APP_Back+"/sociedades")
                        .then(response => {
                          this.user = response.data;
                        })
                        .catch(error => {
                          this.user = error.data;
                        });
            }
  }
</script>

调用不会显示任何类型的错误，它只是在调用 this.user 时显示“没有数据”，它正确显示了 console.log 中的对象数组.

Return response.data 在 API Axios

[{"sociedade_id":1,"sociedade_name":"Testando","sociedade_cnpj":"","sociedade_status":1,"sociedade_hash":null,"sociedade_data_criacao":"2020-04-14T16:35:14.000Z","sociedade_data_expiracao":null,"solicitante":0,"justificativa":""},{"sociedade_id":2,"sociedade_name":"Sociedade - Teste 2","sociedade_cnpj":"Teste 2","sociedade_status":1,"sociedade_hash":"6de22d12e678b1c03e0cb9f95812aaf36c973404","sociedade_data_criacao":"2020-04-14T16:35:14.000Z","sociedade_data_expiracao":"2020-05-23T23:16:32.000Z","solicitante":0,"justificativa":null}]

Answer 1

连接到数据表的变量不是甜点 this.user 所以不用 This.user=response.data 写 this.desserts=response.data 或者你可以将datatable组件中的变量改成user

<v-data-table :headers="headers" :items="user" :search="search" ></v-data-table>

使用 axios get 在 Datatable Vuetify 中获取数据

get data in Datatable Vuetify with axios get

datatable

vue.js

axios

vuetify.js