La tabla de datos de Vuetify no muestra datos

Que esta pasando Sobre el back-end lo lista estoy utilizando postman por el metodo GET, tengo la herramienta en mi google chrome de vue y si llegan los datos en data , y si recibo los en el array, estoy utilizando de back asp.net 3.1, de front-end estoy utilizando Vuejs, Vuetify la version es la ultima vue(v2.6.11), estoy haciendo las peticiones http por medio de axios en la version (0.19.2).

Pero al final no me aparece ningún error en herramientas de desarrollador en console ni en network todo funciona bien si no pues no llegara a data .

necesito Que data-table me muestre los datos que están mi base de datos, ya que no los muestra.

<v-data-table :headers="headers" :item="medium" class= "elevation-1">                    
                <template slot="headers" slot-scope="props">
                       <td class="justify-center layout px-0">
                        <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>   
                        <v-icon small @click="deleteItem(item)">delete</v-icon>
                        </td>   
                        <td>{{ props.mediumId }}</td>
                        <td>{{ props.personalInformationId }}</td>
                        <td>{{ props.medium1 }}</td>                       
                 </template>
                    <template v-slot:no-data>
                         <v-btn color="primary" @click="listar">Enciendelo Eduardo</v-btn>
                    </template>
  </v-data-table>

SCRIPT

import axios from 'axios'
export default {
    data: () => ({               
            dialog: false,
            headers: [
            { text: 'Opciones', value: 'opciones', sortable: false },
            { text: 'Medio de id', value: 'mediumId' },
            { text: 'Medio de persona', value: 'personalInformationId' },
            { text: 'Medio ', value: 'medium1' },
            ],
             medium:[ {
             editedIndex: -1,
             mediumId: '',
             personalInformationId: '',
             medium1:'' , 
             }
             ],
    }),

    computed: {
    formTitle () {
        return this.editedIndex === -1 ? 'Registrar' : 'Actualizar'
    },
    },
    watch: {
    dialog (val) {
        val || this.close()
    },
    },
    created () {
        this.listar();
    },

    methods: {
        listar (){
            let me=this;
            axios.get('api/Medium').then(function(response){
            //console.log(response);
             me.medium=response.data;
           }).catch(function(error){
             console.log(error);
            });
        },

Si no estoy mal, la propiedad items esta mal escrita en forma singular. Deberia ser

<v-data-table :items="medium" ...></v-data-table>

Fijate que si ya lo coloque pero me dice que no es una funcion y me tira este error si la cambio.
[Vue warn]: Error in render: “TypeError: this.items.slice is not a function”

Ese error me hace pensar que el valor que se esta pasando a :items no es un array. Pero veo que también dijiste que podías ver al respuesta del GET y te estaba llegando en array. Hay otros errores que te esta tirando?
Puedes tomar un log del estado de medium al correr el created hook despues de llamar listar?

Otro curiosidad, estuve mirando la documentación para v-data-table. Específicamente el API, me parece que el nombre del slot es “header” en forma singular.

No realmente no tira ningun otro error si le cambio a plural items entonces da el siguiente error = [Vue warn]: Error in render: “TypeError: this.items.slice is not a function.

si puedo listar por un log el estado de medium.

si esta llegando el array.

.

Y como puedes ver no tengo ningun error eso es lo malo no me dice de que tela tirar.

El problema era de como estaba haciendo el llamado en la ultima versión aqui pueden verificar los distintos llamados que se pueden hacer por medio del script y me funciono sin problemas.

  • response es el objeto de respuesta axios
  • response.data es el objeto paginador asp (el que necesitas)
  • response.data.data es la data matriz dentro del objeto paginador asp
1 Like