Vuetify DataTable 与 laravel Inertia JS

Question

Please Help me, I'm new to inertia I'm planning to create user crud page with vuetify datatable but i'm stuck here.

my question is how can I assign users data from the backend into the datatable because no tr/ td tag in vuetify datatable?

I already tried searching on the internet but most of the tutorial out there was using tailwindcss.

 < script > export default { data: () => ({ dialog: false, dialogDelete: false, headers: [{ text: 'Name', align: 'start', sortable: false, value: 'name', }, { text: 'Email', value: 'email' }, { text: 'Roles', value: 'roles' }, { text: 'Actions', value: 'actions', sortable: false }, ], users: [], editedIndex: -1, editedItem: { name: '', email: '', roles: '', }, defaultItem: { name: '', email: '', roles: '', }, }), computed: { formTitle() { return this.editedIndex === -1? 'New User': 'Edit User' }, }, watch: { dialog(val) { val || this.close() }, dialogDelete(val) { val || this.closeDelete() }, }, created() { this.initialize() }, methods: { initialize() { this.users = users }, editItem(item) { this.editedIndex = this.users.indexOf(item) this.editedItem = Object.assign({}, item) this.dialog = true }, deleteItem(item) { this.editedIndex = this.users.indexOf(item) this.editedItem = Object.assign({}, item) this.dialogDelete = true }, deleteItemConfirm() { this.users.splice(this.editedIndex, 1) this.closeDelete() }, close() { this.dialog = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, closeDelete() { this.dialogDelete = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, create() { this.$inertia.visit(route('organizations.create')) }, edit(_organisation) { this.$inertia.visit(route('organizations.edit', _organisation)) }, } } < /script>

 <template> <v-data-table:headers="headers":items="users" sort-by="name" class="elevation-1" > <template v-slot:top> <v-toolbar flat > <v-toolbar-title>My CRUD</v-toolbar-title> <v-divider class="mx-4" inset vertical ></v-divider> <v-spacer></v-spacer> <v-dialog v-model="dialog" max-width="500px" > <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on" > New User </v-btn> </template> <v-card> <v-card-title> <span class="headline">{{ formTitle }}</span> </v-card-title> <v-card-text> <v-container> <v-row> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.name" label="Name"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.email" label="Email"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.Roles" label="Roles"></v-text-field> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="close"> Cancel </v-btn> <v-btn color="blue darken-1" text @click="save"> Save </v-btn> </v-card-actions> </v-card> </v-dialog> <v-dialog v-model="dialogDelete" max-width="500px"> <v-card> <v-card-title class="headline">Are you sure you want to delete this user?</v-card-title> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn> <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn> <v-spacer></v-spacer> </v-card-actions> </v-card> </v-dialog> </v-toolbar> </template> <template v-slot:item.actions="{ item }"> <v-icon small class="mr-2" @click="editItem(item)" > mdi-pencil </v-icon> <v-icon small @click="deleteItem(item)" > mdi-delete </v-icon> </template> <template v-slot:no-data> <v-btn color="primary" @click="initialize" > Reset </v-btn> </template> </v-data-table> </template>

Answer 1

You need to remove the empty users: [] from your data object and receive the user from the backend through props .

export default {
   props: ['users']
}

This way Inertia will automatically bind the the data passed to Inertia::render to your page component.