0

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

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

1 Answer 1

1

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>
Sign up to request clarification or add additional context in comments.

2 Comments

I updated the post informing the return of response.data
I have updated my answer please check it now

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.