如何获取待更新日期的ID
How to get the ID of the date to be updated
这是我的类星体Table。
<q-table
flat
bordered
title="Category"
:data="categories"
:columns="columns"
row-key="id"
>
<template v-slot:top-right="props">
<q-input outlined dense debounce="300" placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<div class="q-pa-sm q-gutter-sm"></div>
<q-btn
@click="addProductForm = !addProductForm"
outline
color="white"
text-color="black"
icon-right="add"
label="Add Category"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols.filter(col => col.name !== 'Actions')"
:key="col.name"
>
{{ col.value }}
</q-td>
<td key="Actions">
<q-btn
dense
flat
color="primary"
field="edit"
icon="edit"
@click="editCategoryName(props.row)"
/>
<q-btn dense flat color="negative" field="delete" icon="delete" />
</td>
</q-tr>
</template>
</q-table>
当我单击“编辑”时,会显示正在编辑的内容的名称,这是我的编辑表单。
<q-dialog
v-model="editCategoryForm"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card style="width: 700px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">Edit Category</div>
</q-card-section>
<div class="q-pa-md">
<q-input
outlined
v-model="edit.categoryName"
label="Category name"
lazy-rules
:rules="[
val => (val && val.length > 0) || 'Please add a Category name'
]"
/>
<div class="q-ma-md float-right">
<q-btn label="Cancel" @click="closeModalEdit" />
<q-btn
class="q-ml-md "
color="secondary"
@click="editCategory"
:disabled="isEditing"
:loading="isEditing"
>{{ isEditing ? "Editing..." : "Edit" }}</q-btn
>
</div>
</div>
</q-card>
</q-dialog>
我点击编辑表单显示的方法
editCategoryName(name) {
console.log(name.categoryName, "categoryname");
this.editCategoryForm = true;
this.edit.categoryName = name.categoryName;
},
我的编辑方法
editCategory() {
let category = this.edit;
if (category.categoryName.trim() == "") {
(this.editCategoryForm = false),
this.$q
.dialog({
title: "Incomplete Details",
message: "Please fill up the category name",
persistent: true,
color: "negative"
})
.onOk(() => {
this.editCategoryForm = true;
});
} else {
let name = this;
this.$axios({
method: "post",
url: "http://127.0.0.1:8000/api/editCategory",
data: {
categoryName: name.edit.categoryName
}
})
.then(response => {
console.log(response.data, "editCategory");
this.$q.notify({
icon: "info",
message: "Category Updated Successfully",
color: "positive"
});
this.editCategoryForm = false;
})
.catch(err => {
this.$q.notify({
icon: "error",
message: err + "" + "Category Update Failed",
color: "negative"
});
});
}
},
我的laravelapi
public function editCategory(Request $request)
{
$this->validate($request,[
'categoryName' => 'required'
]);
$updatedCategory = Category::where('id', $request->id)->update([
'categoryName' => $request->categoryName
]);
return response()->json($updatedCategory);
}
而 preview/response 总是说 0
问题是,即使对话框显示更新成功,它也没有更新。有人知道问题出在哪里吗?
您尚未将 ID 传递给您的控制器并尝试使用 $request->id
进行更新。您只是将 categoryName
发送到您的控制器。
像这样
this.$axios({
method: "post",
url: "http://127.0.0.1:8000/api/editCategory",
data: {
categoryName: name.edit.categoryName,
id : name.edit.id // i added id here
}
})
这是我的类星体Table。
<q-table
flat
bordered
title="Category"
:data="categories"
:columns="columns"
row-key="id"
>
<template v-slot:top-right="props">
<q-input outlined dense debounce="300" placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<div class="q-pa-sm q-gutter-sm"></div>
<q-btn
@click="addProductForm = !addProductForm"
outline
color="white"
text-color="black"
icon-right="add"
label="Add Category"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols.filter(col => col.name !== 'Actions')"
:key="col.name"
>
{{ col.value }}
</q-td>
<td key="Actions">
<q-btn
dense
flat
color="primary"
field="edit"
icon="edit"
@click="editCategoryName(props.row)"
/>
<q-btn dense flat color="negative" field="delete" icon="delete" />
</td>
</q-tr>
</template>
</q-table>
当我单击“编辑”时,会显示正在编辑的内容的名称,这是我的编辑表单。
<q-dialog
v-model="editCategoryForm"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card style="width: 700px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">Edit Category</div>
</q-card-section>
<div class="q-pa-md">
<q-input
outlined
v-model="edit.categoryName"
label="Category name"
lazy-rules
:rules="[
val => (val && val.length > 0) || 'Please add a Category name'
]"
/>
<div class="q-ma-md float-right">
<q-btn label="Cancel" @click="closeModalEdit" />
<q-btn
class="q-ml-md "
color="secondary"
@click="editCategory"
:disabled="isEditing"
:loading="isEditing"
>{{ isEditing ? "Editing..." : "Edit" }}</q-btn
>
</div>
</div>
</q-card>
</q-dialog>
我点击编辑表单显示的方法
editCategoryName(name) {
console.log(name.categoryName, "categoryname");
this.editCategoryForm = true;
this.edit.categoryName = name.categoryName;
},
我的编辑方法
editCategory() {
let category = this.edit;
if (category.categoryName.trim() == "") {
(this.editCategoryForm = false),
this.$q
.dialog({
title: "Incomplete Details",
message: "Please fill up the category name",
persistent: true,
color: "negative"
})
.onOk(() => {
this.editCategoryForm = true;
});
} else {
let name = this;
this.$axios({
method: "post",
url: "http://127.0.0.1:8000/api/editCategory",
data: {
categoryName: name.edit.categoryName
}
})
.then(response => {
console.log(response.data, "editCategory");
this.$q.notify({
icon: "info",
message: "Category Updated Successfully",
color: "positive"
});
this.editCategoryForm = false;
})
.catch(err => {
this.$q.notify({
icon: "error",
message: err + "" + "Category Update Failed",
color: "negative"
});
});
}
},
我的laravelapi
public function editCategory(Request $request)
{
$this->validate($request,[
'categoryName' => 'required'
]);
$updatedCategory = Category::where('id', $request->id)->update([
'categoryName' => $request->categoryName
]);
return response()->json($updatedCategory);
}
而 preview/response 总是说 0
问题是,即使对话框显示更新成功,它也没有更新。有人知道问题出在哪里吗?
您尚未将 ID 传递给您的控制器并尝试使用 $request->id
进行更新。您只是将 categoryName
发送到您的控制器。
像这样
this.$axios({
method: "post",
url: "http://127.0.0.1:8000/api/editCategory",
data: {
categoryName: name.edit.categoryName,
id : name.edit.id // i added id here
}
})