How to show correctly all the users in a v-data-table?

Question

I'm trying to show all the users that I have in Firebase, inside a v-data-table, but all the rows are shown in a single row.

<v-data-table
    :headers="headers"
    :items="users"
    :loading="loading"
    class="elevation-1"
    :no-data-text="$t('admin.usersTable.empty')"
  >
  <template slot="item" slot-scope="props">
    <td class="text-xs-right">{{ props.item.uid }}</td>
    <td class="text-xs-right">{{ props.item.email }}</td>
    <td class="text-xs-right">{{ props.item.username }}</td>

    <td class="justify-center layout px-0">
      <v-btn icon class="mx-0" @click="editUser(props.item)">
        <v-icon color="teal">edit</v-icon>
      </v-btn>

      <v-btn icon class="mx-0" @click="removeUser(props.item)">
        <v-icon color="pink">delete</v-icon>
      </v-btn>
    </td>

  </template>
</v-data-table>

I expect the three users in a three different rows, but the result is that I have the users in one row

Have you tried `console.log()`ing `items` to make sure it's a well formed array? — jacob13smith, Sep 11 '19 at 00:36

score 0 · Answer 1 · answered Sep 11 '19 at 09:09

0

Maybe you should add a "s" in the word "item" ?

Like that :

<template slot="items" slot-scope="props">

answered Sep 11 '19 at 09:09

Guizboule

175
9

if i do that, i lose de button from the 4th column – Jesus Favela Sep 11 '19 at 21:13

How to show correctly all the users in a v-data-table?

1 Answers1