使用 laravel Inertia JS Vuetify DataTable

Posted 2023-02-22

【中文标题】使用 laravel Inertia JS Vuetify DataTable

【英文标题】：Vuetify DataTable with laravel Inertia JS

【发布时间】：2021-04-09 10:52:32

【问题描述】：

请帮助我，我是惯性新手，我打算使用 vuetify 数据表创建用户 crud 页面，但我被困在这里。

我的问题是如何将用户数据从后端分配到数据表中，因为 vuetify 数据表中没有 tr/td 标签？

我已经尝试在互联网上搜索，但那里的大部分教程都是使用 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-
        >
          <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->
  <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>

【参考方案1】：

您需要从您的data 对象中删除空的users: []，并通过props 从后端接收用户。

export default 
   props: ['users']

这样，Inertia 会自动将传递给Inertia::render 的数据绑定到您的页面组件。