I need to display the contents of a data table in a vuetify component: . https://vuetifyjs.com/en/components/data-tables/#api

I make a request to the server to retrieve the data, in a forEach loop I create an object for each row of my data table. However, nothing is displayed.

<template>
<v-main>
        <v-container fluid fill-height>
            <v-row align-center justify-center>
                <v-col xs12 sm8 md4>
                    <h1>liste des utilisateurs</h1>
                    <v-data-table v-if="show == 1"
                        :headers="headers"
                        :items="users"
                        :items-per-page="5"
                        
                    ></v-data-table>
                </v-col>
            </v-row>
        </v-container>
</v-main>
</template>

<script>
    export default {
        data(){
            return {
                show: 0,
        headers: [
          {
            text: 'user_id',
            align: 'start',
            sortable: false,
            value: 'user_id',
          },
          { text: 'username', value: 'username' },
          { text: 'email', value: 'email' },
          { text: 'tag_property', value: 'tag_property'},
        ],

        users: [
          {
            user_id: 1,
            username: 'Frozen Yogurt',
            email: 'hello',
            tag_property: ['tag_7z6eq73', ' tag_7z7eq23'] 
          },
        ],
            }
        },

    mounted(){
            this.GetUsers();
        },

        methods: {
           GetUsers(){
            
            const url = `http://192.168.1.51:3000/api/v1/users`;
            fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
            })
            .then(res => res.text())
            .then((result) => {
                const data = JSON.parse(result);
                data.forEach(d => {
                    const {
                        user_id,
                        username,
                        email,
                        tag_property,
                    } = d;
                    const us = Object.create(this.users);
                    us.user_id = user_id;
                    us.username = username;
                    us.email = email;
                    us.tag_property = tag_property;
                    console.log(us.username)
                });
                this.show = 1;
            console.log(this.users);
            })
        .catch((error) => {
            console.log(error)
        });
            },
        }
    }
</script>

This is what I have :

v-data-table

I am still a novice, is my way of doing this the right one?

Working well with this.users = JSON.parse(result);

CodePudding user response：

No need for the forEach, just assign the parsed data to the data property :

then((result) => {
      this.users = JSON.parse(result);
})

CodePudding user response：

You haven't assigned the value to this.users

double check output of this line console.log(this.users);