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>