如何获取要更新的日期的ID

Question

这是我的 Quasar 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"
        });
      });
  }
},

我的 laravel 接口

public function editCategory(Request $request)
{
    $this->validate($request,[
        'categoryName' => 'required'
    ]);

    $updatedCategory =  Category::where('id', $request->id)->update([
        'categoryName' => $request->categoryName
    ]);

    return response()->json($updatedCategory);
}

预览/响应总是显示 0

问题是，即使对话框说更新成功，它也没有更新。有谁知道问题出在哪里？

Answer 1

您尚未将 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
  }
})