[英]vue.js and laravel simple form submission with vuetify
大家好,我昨天刚使用过 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>
控制器
public function store(Request $request) {
$request->validate ([
'department' => 'required',
]);
$department = Department::updateOrCreate([
'department_name' => $request->department
]);
return response()->json([
'message' => 'Add Success'
], 200);
}
在save
方法中,您需要将department
更改为块范围内的this.department
save() {
axios.post('/api/department', {
department: this.department,
})
}
更新
基于@Ohgodwhy 建议:
save() {
const { department } = this
axios.post('/api/department', { department })
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.