title: Vuetify DataTable with laravel Inertia JS
body: <p>Please Help me, I'm new to inertia I'm planning to create user crud page with vuetify datatable but i'm stuck here.</p>
  <p>my question is how can I assign users data from the backend into the datatable because no tr/ td tag in vuetify datatable?</p>
  <p>I already tried searching on the internet but most of the tutorial out there was using tailwindcss.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt; script &gt;
    export default {
      data: () =&gt; ({
        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(() =&gt; {
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
          })
        },
  
        closeDelete() {
          this.dialogDelete = false
          this.$nextTick(() =&gt; {
            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))
        },
      }
    } &lt;
    /script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="users"
      sort-by="name"
      class="elevation-1"
    &gt;
      &lt;template v-slot:top&gt;
        &lt;v-toolbar
          flat
        &gt;
          &lt;v-toolbar-title&gt;My CRUD&lt;/v-toolbar-title&gt;
          &lt;v-divider
            class="mx-4"
            inset
            vertical
          &gt;&lt;/v-divider&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;v-dialog
            v-model="dialog"
            max-width="500px"
          &gt;
            &lt;template v-slot:activator="{ on, attrs }"&gt;
              &lt;v-btn
                color="primary"
                dark
                class="mb-2"
                v-bind="attrs"
                v-on="on"
              &gt;
                New User
              &lt;/v-btn&gt;
            &lt;/template&gt;
  &lt;v-card&gt;
    &lt;v-card-title&gt;
      &lt;span class="headline"&gt;{{ formTitle }}&lt;/span&gt;
    &lt;/v-card-title&gt;
  
    &lt;v-card-text&gt;
      &lt;v-container&gt;
        &lt;v-row&gt;
          &lt;v-col cols="12" sm="6" md="4"&gt;
            &lt;v-text-field v-model="editedItem.name" label="Name"&gt;&lt;/v-text-field&gt;
          &lt;/v-col&gt;
          &lt;v-col cols="12" sm="6" md="4"&gt;
            &lt;v-text-field v-model="editedItem.email" label="Email"&gt;&lt;/v-text-field&gt;
          &lt;/v-col&gt;
          &lt;v-col cols="12" sm="6" md="4"&gt;
            &lt;v-text-field v-model="editedItem.Roles" label="Roles"&gt;&lt;/v-text-field&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
    &lt;/v-card-text&gt;
  
    &lt;v-card-actions&gt;
      &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;v-btn color="blue darken-1" text @click="close"&gt;
        Cancel
      &lt;/v-btn&gt;
      &lt;v-btn color="blue darken-1" text @click="save"&gt;
        Save
      &lt;/v-btn&gt;
    &lt;/v-card-actions&gt;
  &lt;/v-card&gt;
  &lt;/v-dialog&gt;
  &lt;v-dialog v-model="dialogDelete" max-width="500px"&gt;
    &lt;v-card&gt;
      &lt;v-card-title class="headline"&gt;Are you sure you want to delete this user?&lt;/v-card-title&gt;
      &lt;v-card-actions&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-btn color="blue darken-1" text @click="closeDelete"&gt;Cancel&lt;/v-btn&gt;
        &lt;v-btn color="blue darken-1" text @click="deleteItemConfirm"&gt;OK&lt;/v-btn&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;/v-card-actions&gt;
    &lt;/v-card&gt;
  &lt;/v-dialog&gt;
  &lt;/v-toolbar&gt;
  &lt;/template&gt;
  &lt;template v-slot:item.actions="{ item }"&gt;
        &lt;v-icon
          small
          class="mr-2"
          @click="editItem(item)"
        &gt;
          mdi-pencil
        &lt;/v-icon&gt;
        &lt;v-icon
          small
          @click="deleteItem(item)"
        &gt;
          mdi-delete
        &lt;/v-icon&gt;
      &lt;/template&gt;
  &lt;template v-slot:no-data&gt;
        &lt;v-btn
          color="primary"
          @click="initialize"
        &gt;
          Reset
        &lt;/v-btn&gt;
      &lt;/template&gt;
  &lt;/v-data-table&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>