编辑功能可以'；在vue js和laravel中无法正常工作

我使用laravel&vue js构建了一个任务管理项目，该项目运行得非常好。但编辑功能在此应用程序中无法正常工作。我尝试了很多次，但失败了。即使单击“编辑”选项，这也会与“创建/添加”功能相同。如何解决此问题。我将在下面分享我的代码：

resource/js/app.js

         require("./bootstrap");

         window.Vue = require("vue");

          / / Register our components
          Vue.component("kanban-board", require("./components/KanbanBoard.vue").default);


         const app = new Vue({
    el: "#app"
         });

资源/js/components/KanbanBoard.vue

          <template>
          <div class="relative p-2 flex overflow-x-auto h-full">
         <!-- Columns (Statuses) -->
              <div
         v-for="status in statuses"
          :key="status.slug"
        class="mr-6 w-4/5 max-w-xs flex-shrink-0"
         >
         <div class="rounded-md shadow-md overflow-hidden">
            <div class="p-1 flex justify-between items-baseline bg-green-500 ">
             <h4 class="font-medium text-white">
               {{ status.title }}
          </h4>
 
         </div>
          <div class="p-2 bg-green-300">
     <!-- AddTaskForm -->
     <AddTaskForm
       v-if="newTaskForStatus === status.id"
       :status-id="status.id"
       v-on:task-added="handleTaskAdded"
       v-on:task-canceled="closeAddTaskForm"
     />
     <!-- ./AddTaskForm -->
     <!-- EditTaskForm -->
     <AddTaskForm
       v-if="editTaskForStatus === status.id"
       :status-id="status.id"
       v-on:task-edit="handleTaskEdit"
       v-on:task-canceled="closeEditTaskForm"
     />
     <!-- ./EditTaskForm -->

     <!-- Tasks -->
     <draggable
       class="flex-1 overflow-hidden"
        v-model="status.tasks"
       v-bind="taskDragOptions"
       @end="handleTaskMoved"
     >
        <transition-group
         class="flex-1 flex flex-col h-full overflow-x-hidden overflow-y-auto rounded shadow-xs"
         tag="div"
       >
         <div
        v-for="task in status.tasks"
        :key="task.id"
        class="mb-3 p-4 flex flex-col bg-white rounded-md shadow transform hover:shadow-md cursor- 
         pointer"
         >
       
         <button
         type="submit"
      @click="openEditTaskForm(status.id)"
       class="py-1 px-2 text-sm text-black-500 hover:underline"
         >
       Edit Task
      </button>
      <span class="block mb-2 text-xl text-gray-900">
  
            Task-100{{ task.id }}
          
          </span>
            <span class="block mb-2 text-xl text-gray-900">
             {{ task.title }}
           </span>
           <p class="text-gray-700">
             {{ task.description }}
           </p>
         </div>
         <!-- ./Tasks -->
       </transition-group>
        </draggable>
      <!-- No Tasks -->
         <div
       v-show="!status.tasks.length && newTaskForStatus !== status.id"
       class="flex-1 p-4 flex flex-col items-center justify-center"
     >
       <!-- <span class="text-gray-600">No tasks yet</span> -->
    <button
         class="mt-1 text-sm text-orange-600 hover:underline"
         @click="openAddTaskForm(status.id)"
       >
           Add one
       </button>
     </div>
     <!-- ./No Tasks -->
        </div>
           </div>
           <button
       type="submit"
        @click="openAddTaskForm(status.id)"
        class="px-12 py-1 leading-5 text-white bg-orange-600 hover:bg-orange-500 rounded"
      >
         Add
        </button>
       </div>
      <!-- ./Columns -->
     </div>
         </template>

     <script>
   import draggable from "vuedraggable";
   import AddTaskForm from "./AddTaskForm";
   import EditTaskForm from "./EditTaskForm";

     export default {

    components: { draggable, AddTaskForm,EditTaskForm },
    props: {
       initialData: Array
           },
      data() {
         return {
          statuses: [],


              newTaskForStatus: 0,
                editTaskForStatus: 0
            };
        },

         computed: {
              taskDragOptions() {
            return {
                   animation: 200,
                  group: "task-list",
                 dragClass: "status-drag"
             };
         }
        },
            mounted() {
                // 'clone' the statuses so we don't alter the prop when making changes
                  this.statuses = JSON.parse(JSON.stringify(this.initialData));

                },

           methods: {


              openAddTaskForm(statusId) {
               this.newTaskForStatus = statusId;
            },
            closeAddTaskForm() {
            this.newTaskForStatus = 0;
            },
            handleTaskAdded(newTask) {
                 // Find the index of the status where we should add the task 
        const statusIndex = this.statuses.findIndex(
             status => status.id === newTask.status_id
          );

           // Add newly created task to our column
               this.statuses[statusIndex].tasks.push(newTask);

              // Reset and close the AddTaskForm
              this.closeAddTaskForm();
                  },
             handleTaskMoved(evt) {
             axios.put("/tasks/sync", { columns: this.statuses }).catch(err => {
                console.log(err.response);
              });
            },
               openEditTaskForm(statusId) {
                 this.editTaskForStatus = statusId;
           },
                closeEditTaskForm() {
                  this.editTaskForStatus = 0;
                },
             handleTaskEdit(editTask) {
             // Find the index of the status where we should add the task 
                   const statusIndex = this.statuses.findIndex(
                  status => status.id === editTask.status_id
              );

            // Add newly created task to our column
            this.statuses[statusIndex].tasks.push(editTask);

            // Reset and close the AddTaskForm
           this.closeEditTaskForm();
                 }
              }
               };
              </script>

       <style scoped>
            .status-drag {
                 transition: transform 0.5s;
              transition-property: all;
         }
          </style>

---

您应该删除以上所有代码，只需发布一个指向codesandbox.io页面或类似页面的链接。您在laravel中有一个put路由，但在vue文件中使用补丁请求

    <template>
     <form
            class="relative mb-3 flex flex-col justify-between bg-white rounded-md shadow overflow- 
          hidden"
                  @submit.prevent="handleAddNewTask"
                 >
         <div class="p-3 flex-1">
           <input
               class="block w-full px-2 py-1 text-lg border-b border-blue-800 rounded"
                type="text"
              placeholder="Enter a title"
              v-model.trim="newTask.title"
          />
            <textarea
              class="mt-3 p-2 block w-full p-1 border text-sm rounded"
                rows="2"
              placeholder="Add a description"
                 v-model.trim="newTask.description"
              ></textarea>
             <div v-show="errorMessage">
                 <span class="text-xs text-red-500">
             {{ errorMessage }}
                </span>
           </div>
            </div>
           <div class="p-3 flex justify-between items-end text-sm bg-gray-100">
                <button
                 @click="$emit('task-canceled')"
               type="reset"
                 class="py-1 leading-5 text-gray-600 hover:text-gray-700"
                   >
               cancel
              </button>
            <button
                type="submit"
              class="px-3 py-1 leading-5 text-white bg-orange-600 hover:bg-orange-500 rounded"
              >
              Add
            </button>
           </div>
              </form>
           </template>

       <script>
        export default {
          props: {
              statusId: Number
           },
          data() {
            return {
         newTask: {
              title: "",
           description: "",
            status_id: null
          },
            errorMessage: ""
         };
         },
           mounted() {
                 this.newTask.status_id = this.statusId;
       },
              methods: {
             handleAddNewTask() {
                  // Basic validation so we don't send an empty task to the server
               if (!this.newTask.title) {
                           this.errorMessage = "The title field is required";
               return;
                 }

                     // Send new task to server
             axios
                  .post("/tasks", this.newTask)
                  .then(res => {
                   // Tell the parent component we've added a new task and include it
                    this.$emit("task-added", res.data);
                })
                 .catch(err => {
                   // Handle the error returned from our request
                this.handleErrors(err);
                  });
         },
               handleErrors(err) {
             if (err.response && err.response.status === 422) {
              // We have a validation error
            const errorBag = err.response.data.errors;
              if (errorBag.title) {
                 this.errorMessage = errorBag.title[0];
                 } else if (errorBag.description) {
                  this.errorMessage = errorBag.description[0];
               } else {
              this.errorMessage = err.response.message;
           }
            } else {
          // We have bigger problems
              console.log(err.response);
             }
            }
           }
          };
             </script>

     <template>
          <form
         class="relative mb-3 flex flex-col justify-between bg-white rounded-md shadow overflow- 
         hidden"
           @submit.prevent="handleEditTask"
          >
       <div class="p-3 flex-1">
      <input
          class="block w-full px-2 py-1 text-lg border-b border-blue-800 rounded"
             type="text"

             @blur="handleEditTask(task)"
            v-model="editTask.title"
            />
           <textarea
              class="mt-3 p-2 block w-full p-1 border text-sm rounded"
             rows="2"
                   p
              @blur="handleEditTask(task)"
                 v-model="editTask.description"
                 ></textarea>
              <div v-show="errorMessage">
                      <span class="text-xs text-red-500">
                   {{ errorMessage }}
              </span>
               </div>
           </div>
             <div class="p-3 flex justify-between items-end text-sm bg-gray-100">
           <button
               @click="$emit('task-canceled')"
                type="reset"
                   class="py-1 leading-5 text-gray-600 hover:text-gray-700"
             >
           cancel
         </button>
          <button
               type="submit"
                     class="px-3 py-1 leading-5 text-white bg-orange-600 hover:bg-orange-500 rounded"
            >
                Add
              </button>
           </div>
           </form>
        </template>

        <script>
         export default {
            props: {
          statusId: Number
         },
       data() {
       return {
            editTask: {
   
          title:task.title,
             description:task.description,
            status_id: null
           },
             errorMessage: ""
      };
      },
    mounted() {
       this.editTask.status_id = this.statusId;
     },
      methods: {
        handleEditTask() {

        // Basic validation so we don't send an empty task to the server
         if (!this.editTask.title) {
              this.errorMessage = "The title field is required";
             return;
          }

              // Send edit task to server
        axios
             .patch("tasks/{task}", this.editTask)
               .then(res => {
                 // Tell the parent component we've added a new task and include it
             this.$emit("task-edit", res.data);
            })
           .catch(err => {
             // Handle the error returned from our request
            this.handleErrors(err);
           });
        },
          handleErrors(err) {
            if (err.response && err.response.status === 422) {
           // We have a validation error
           const errorBag = err.response.data.errors;
           if (errorBag.title) {
               this.errorMessage = errorBag.title[0];
           } else if (errorBag.description) {
            this.errorMessage = errorBag.description[0];
            } else {
                this.errorMessage = err.response.message;
            }
          } else {
         // We have bigger problems
            console.log(err.response);
         }
     }
   }
 };
  </script>

   <?php

     namespace App\Http\Controllers;

      use App\Task;
      use Illuminate\Http\Request;

     class TaskController extends Controller
              {
             public function index()
          {
              $tasks = auth()->user()->statuses()->with('tasks')->get();

                return view('tasks.index', compact('tasks'));
           }

           public function create()
          {
                //
             }

             public function store(Request $request)
               {
                     $this->validate($request, [
                    'title' => ['required', 'string', 'max:56'],
                   'description' => ['nullable', 'string'],
                          'status_id' => ['required', 'exists:statuses,id']
                        ]);

               return $request->user()
                ->tasks()
                ->create($request->only('title', 'description', 'status_id'));
               }       

             public function sync(Request $request)
          {
                   $this->validate(request(), [
                    'title' => ['required', 'string', 'max:56'],
                 'description' => ['nullable', 'string'],
                'columns' => ['required', 'array']
            ]);

               foreach ($request->columns as $status) {
                foreach ($status['tasks'] as $i => $task) {
                     $order = $i + 1;
                         if ($task['status_id'] !== $status['id'] || $task['order'] !== $order) {
                       request()->user()->tasks()
                           ->find($task['id'])
                             ->update(['status_id' => $status['id'], 'order' => $order],$request- 
         >only('title', 'description', 
          'status_id'));
                }
             } 
        }

          return $request->user()->statuses()->with('tasks')->get();
       }

         public function show(Task $task)
         {
//
        }

          public function edit(Request $request)
          {


             }

                public function update(Request $request, Task $task)
               {
                 $this->validate($request, [
                'title' => ['required', 'string', 'max:56'],
                  'description' => ['nullable', 'string'],
                'status_id' => ['required', 'exists:statuses,id']
                  ]);

              return $request->user()
                    ->tasks()
                      ->update($request->only('title', 'description', 'status_id'));
                }

              public function destroy(Task $task)
               {
             //
           }
           }

       @extends('layouts.app')

       @section('content')
       <div class="md:mx-4 relative overflow-hidden">
       <main class="h-full flex flex-col overflow-auto">
        <kanban-board :initial-data="{{ $tasks }}"></kanban-board>
       </main>
       </div>
        @endsection

      Route::group(['middleware' => 'auth'], function () {
         Route::get('tasks', 'TaskController@index')->name('tasks.index');
         Route::post('tasks', 'TaskController@store')->name('tasks.store');
        Route::put('tasks/sync', 'TaskController@sync')->name('tasks.sync');
       Route::put('tasks/{task}', 'TaskController@update')->name('tasks.update');
      });

     Route::group(['middleware' => 'auth'], function () {
      Route::post('statuses', 'StatusController@store')->name('statuses.store');
     Route::put('statuses', 'StatusController@update')->name('statuses.update');
      });