javascript - vue.js 和 laravel 使用 vuetify 进行简单表单提交

Question

大家好，我昨天刚刚使用了 vuetify，似乎我在提交 axios.post 表单时遇到了错误。我对这段代码的错误感到困惑。除了这次使用 vuetify 之外，它与我之前的项目基本相同。

这是我的代码。

模板我的component.vue模板字段。

<template>
  <v-card>
    <v-card-title>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="departments"
      :search="search"
      :items-per-page="5"
    >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>Department</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px" persistent>
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-form @submit.prevent="save()">
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="12" md="12">
                    <v-text-field v-model="department" label="Department Name"></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 type="submit" color="blue darken-1" text>Save</v-btn>
            </v-card-actions>
            </v-form>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
      <v-icon small @click="deleteItem(item.id)">delete</v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize()">Reset</v-btn>
    </template>
    </v-data-table>
  </v-card>
</template>

脚本我的component.vue脚本字段。

   <script>
  export default {
    data: () => ({
      search: '',
      departments: [],
      department: '',
      dialog: false,
      headers: [
        {
          text: 'Department Name',
          align: 'left',
          sortable: true,
          value: 'department_name',
        },
        { text: 'Created By', value: 'department.created_at' },
        { text: 'Created At', value: 'department.created_at' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      editedIndex: -1,
      editedItem: {
        name: '',
      },
      defaultItem: {
        name: '',
      },
    }),

    computed: {
      formTitle() {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },

    watch: {
      dialog(val) {
        val || this.close()
      },
    },

    created() {
      this.initialize()
    },

    methods: {
      initialize() {
        axios
        .get('/api/departments')
        .then(response => this.departments = response.data)
        .catch(error => console.log(error))
      },
      editItem (item) {
        this.dialog = true
        this.editedIndex = this.departments.indexOf(item)
        this.editedItem = Object.assign({}, item)
      },
      deleteItem(id) {
        if(confirm('Are you sure you want to delete this item?') && this.departments.splice(index, 1)) {
          axios
          .delete(`/api/department/${id}`)
          .then(response => this.initialize())
          .catch(error => console.log(error))   
        }
      },
      close() {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },
      save() {
          axios
          .post('/api/department', {
                      department: department,
          })
          .then(response => this.initialize())
          .catch(error => console.log(error))

        this.close()
      },
    },
  }
</script>

Controller

 public function store(Request $request) {

    $request->validate ([
      'department' => 'required',
    ]);

    $department = Department::updateOrCreate([
      'department_name' => $request->department
    ]);

    return response()->json([
      'message' => 'Add Success'
    ], 200);
  }

Answer 1

在 save 方法中，您需要将 department 更改为 block 作用域内的 this.department

save() {
    axios.post('/api/department', {
         department: this.department,
    })
}

更新

基于@Ohgodwhy的建议:

save() {
    const { department } = this

    axios.post('/api/department', { department })
}