I want to display the data coming from a get axios api, when I inspect the endpoint call it correctly returns an array with objects, but in the datatable it says that there is no data.

<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"
      
      :
      tabindex="-1"
      role="dialog"
    >
      <div  role="document">
        <div >
          <div >
            <h5 >Criação de usuário</h5>
            <button
              type="button"
              
              data-dismiss="modal"
              aria-label="Close"
              @click="criarUsuario"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div >
            <form v-on:submit.prevent="cadastroUsuario">
            <div >
              <label for="formName" >Nome</label>
              <input  type="text" v-model="nome" id="nome">
            </div>
            <div >
              <label for="formSobrenome" >Sobrenome</label>
              <input  v-model="sobrenome" type="text" id="sobrenome">
            </div>
            <div >
              <label for="formLogin" >Login</label>
              <input  v-model="login" type="text" id="login">
            </div>
            <div >
              <label for="formEmail" >E-mail</label>
              <input  v-model="email" id="email" type="text">
            </div>
            <div >
              <label for="formSenha" >Senha</label>
              <input  v-model="nova_senha" id="nova_senha" type="password">
            </div>
            <div >
              <label for="formCPF" >CPF</label>
              <input  v-model="cpf" id="cpf" type="text">
            </div>
            <div >
              <button type="submit" >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>

The call does not display any kind of error, it just displays that "There is no data" when it makes a call on this.user it correctly displays the array of objects in the console.log.

Return response.data in 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}]

CodePudding user response：

The variable that connected into the datatable is dessert not this.user so insted of using This.user=response.data Write this.desserts=response.data Or you can change the variable in the datatable component into user

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