时间戳

首页 > 解决方案 > Laravel Vue js 编辑模式：将值从字段传递到变量

laravel - Laravel Vue js 编辑模式：将值从字段传递到变量

问题描述

我对结合 Laravel 的 VueJS 非常陌生，所以我决定制作一个简单的 CRUD 应用程序，比如待办事项列表。我可以创建和读取数据。我的问题是我完全迷失了编辑部分。我想出了如何将数据传递给我的模式，但我不明白我必须做什么才能更新新的输入字段。我的问题是，如何将“正文”和“完成”字段传递给脚本中的变量？我知道我不能使用v-modelwith :value。预先感谢您的任何帮助。如果您在代码中发现任何错误，请告诉我，因为尽管我观看并阅读了教程，但我认为我的代码完全没有效率。

列表.vue

<template>
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">User List</div>
        <div class="card-body">
          <table>
            <tr>
              <th width="50%">Completed</th>
              <th width="50%">Task</th>
              <th width="50%">Edit</th>
              <th width="50%">Delete</th>
            </tr>
            <tr v-for="task in list" :key="task.id">
              <td style="color: red" v-if="task.completed == 0">Uncompleted</td>
              <td style="color: green" v-else>Completed</td>
              <td>{{ task.body }}</td>
              <td>
                <button
                  v-if="task.id"
                  class="btn btn-success btn-sm"
                  @click="openModal(task.id)"
                >
                  Edit
                </button>
              </td>
              <td>Delete</td>
            </tr>
          </table>
        </div>
      </div>
      <!--MODAL-->
      <div v-if="myModal">
        <div
          class="modal fade"
          id="EditModal"
          tabindex="-1"
          role="dialog"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div
            class="modal-dialog"
            role="document"
            v-for="task in update_list"
            :key="task.id"
          >
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Task: {{ task.id }}
                </h5>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label>Task</label>
                  <input
                    name="body"
                    type="text"
                    class="form-control"
                    :value="task.body"
                  />
                </div>
                <div class="form-group">
                  <label>Completed:</label>
                  <select>
                    <option
                      name="completed"
                      :value="task.completed"
                      v-if="task.completed == 0"
                    >
                      Uncompleted
                    </option>
                    <option name="completed" value="1">Completed</option>
                    <option
                      name="completed"
                      :value="task.completed"
                      v-if="task.completed == 1"
                    >
                      Completed
                    </option>
                    <option name="completed" value="0">Uncompleted</option>
                  </select>
                </div>
                <br />
                <div align="center">
                  <button
                    type="button"
                    class="btn btn-primary"
                    @click="editTask(task.id)"
                  >
                    Edit
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "List",
  data() {
    return {
      list: {},
      update_list: {},
      myModal: false,
      body: "",
      completed: "",
    };
  },
  methods: {
    getList() {
      axios.get("/task").then((response) => (this.list = response.data));
    },
    openModal(id) {
      axios
        .get("/" + id)
        .then((response) => (this.update_list = response.data));
      $("#EditModal").modal("show");
      this.myModal = true;
    },

    editTask(id) {
      console.log(id);
<!-- undefined vars-->
      axios
        .post("/task/" + id, {
          body: this.update_list.body,
          completed: this.update_list.completed,
        })
        .then((response) => {
          $("#success").html(response.data.message);
          window.location.reload(true);
        });
    },
  },
  created() {
    this.getList();
    this.openModal(id);
    this.myModal = false;
    this.list;
    this.update_list;
    this.body;
    this.completed;
  },
};
</script>

任务控制器.php

 public function update(Request $request, $id)
    {
        $task = Task::where('id', $id)->first();
        $task->body = $request->body;
        $task->completed = $request->completed;
        $task->save();
        return response()->json([
            'message' => 'Task updated'
        ]);
    }

网页.php

Route::get('/task', [TaskController::class, 'index']);
Route::post('/', [TaskController::class, 'store']);
Route::get('/{id}', [TaskController::class, 'find']);
Route::post('/task/{id}', [TaskController::class, 'update']);

标签： laravelvue.jsvuejs2

解决方案

由于您使用的是 SPA，因此您需要通过 API 路由而不是 Web 路由进行 API 调用。所以去 api.php 文件并在那里创建你的路线。顺便说一句，您需要使用 Sanctum SPA 身份验证来对此类操作进行身份验证。如果你使用 Laravel 8 并安装了 Jetstream，那么你已经有了 Sanctum。

api.php

Route::group(['middleware' => 'auth:sanctum'], function () {
    Route::apiResources([
        'tasks'       => 'App\Http\Controllers\API\TaskController',
    ]);
});

要使用 CRUD 函数创建该控制器，请使用：

php artisan make:controller API/TaskController --api

在你的控制器中

public function update(Request $request, $id)
    {
        Task::find($id)->update($request->all());
        return response()->json([
            'message' => 'Task updated'
        ]);
    }

推荐阅读