2

请帮助我，我是惯性新手，我打算用 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-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>

4

1 回答 1

0

您需要users: []从data对象中删除空白并通过props.

export default {
   props: ['users']
}

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

于 2021-08-17T13:50:42.827 回答