Javascript 使用AXIOS和VUE构建CRUD Todo站点

我有一个小应用程序，我正在学习VUE和Axios。我被困在更新部分。我试图将ID传递给表单进行更新，但根本无法理解这一点。删除操作按预期进行。“按预期创建自动加载”和“任务创建”功能完美运行。我看了几段关于如何使用VUE实际实现更新的视频，但就是看不到。试图查找几个视频，并求助于这里询问。我对编码相当陌生，所以如果我问了一个无趣的问题，我会提前道歉

  <div class="container-fluid">
    <div class="row">
      <nav class="navbar col-12 navbar-light bg-light">
        <a class="navbar-brand" href="#">
          Sam's Application
        </a>
      </nav>
    </div>
    <div
      id="welcome-content"
      class="pb-5 pt-5 row d-flex justify-content-center align-items-center flex-column"
    >
      <div
        class="col-4 p-4 d-flex justify-content-center align-items-center flex-column"
      >
        <h1 class="text-success">Welcome to Sam's ToDo App!</h1>
        <p>
          This apps allows you to create tasks, delete, and make modifications.
          Come back later for more features. If you would like to see more,
          please send us a message!
        </p>
      </div>
    </div>
    <section class="pt-5 w-75 row mx-auto pt-">
      <div class="col-4 align-items-center">
        <form class="p-4" id="form" @submit.prevent>
          <strong class="text-danger " v-if="edit"
            >Please make Changes and click Update</strong
          >
          <div class="row mt-3">
            <div class="col-12">
              <input
                class="form-control"
                type="text"
                v-model="currentTask.name"
                v-if="edit"
              />

              <input
                class="form-control"
                type="text"
                v-model="form.name"
                placeholder="Task Title"
                v-else
              />
            </div>
            <div class="col">
              <input
                class="mt-4 form-control"
                type="text"
                v-model="currentTask.description"
                v-if="edit"
              /><input
                class="mt-4 form-control"
                type="text"
                v-model="form.description"
                placeholder="Task Description"
                v-else
              />
            </div>
          </div>
          <button
            type="button"
            class="mt-4 btn btn-warning"
            v-if="edit"
            @click="updateTasks()"
          >
            Update
          </button>
          <button
            type="button"
            class="mt-4 ml-3 btn btn-secondary"
            v-if="edit"
            @click="edit = false"
          >
            Cancel
          </button>
          <button
            type="button"
            class="mt-4 btn btn-primary"
            v-else
            @click="createTasks"
          >
            Create New Task
          </button>
        </form>
      </div>
      <div class="col-8 d-flex justify-content-center ">
        <table class="table table-striped ">
          <tr class="d-flex pl-5">
            <td class="col-4"><strong>Title</strong></td>
            <td class="col-4"><strong>Description</strong></td>
            <td class="col-1"></td>
            <td class="col-1"></td>
          </tr>
          <tr class="d-flex pl-5" :key="id" v-for="(tasks, id) of tasks">
            <td class="col-4" v-bind:key="tasks.id">
              {{ `${tasks.name}` }}
            </td>
            <td class="col-4">
              {{ `${tasks.description}` }}
            </td>
            <td class="col-1">
              <button
                type="button"
                class="btn btn-danger"
                @click="deleteTasks(tasks.id)"
              >
                Delete
              </button>
            </td>
            <td></td>
            <td class="col-1">
              <button
                class="btn btn-warning"
                @click="
                  edit = true;
                  getCurrentTask(tasks.id);
                "
              >
                Edit
              </button>
            </td>
          </tr>
        </table>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      id: ``,
      tasks: [],
      form: {},
      name: "",
      description: "",
      route: "/api/tasks/",
      edit: false,
      currentTask: {},
    };
  },

  mounted: function() {
    this.getTasks();
  },
  methods: {
    getTasks() {
      axios
        .get(this.route)
        .then(({ data }) => {
          this.tasks = [...data];
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getCurrentTask(id) {
      this.currentTask = id;
    },
    createTasks() {
      axios
        .post(this.route, this.form)

        .then(() => {
          this.getTasks();
          this.form = {};
        })

        .catch((e) => {
          console.log(e);
        });
    },

    deleteTasks(id) {
      axios
        .delete(this.route + id)

        .then((result) => {
          console.log(result);
          this.getTasks();
          this.form = {};
        })

        .catch((e) => {
          console.log(e);
        });
    },
    updateTasks(id) {
      axios
        .put(this.route + id, this.currentTask)
        .then((result) => {
          console.log(result);
          this.getTasks();
        })

        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style>
.container-fluid {
  background-image: url(https://cdn.wallpapersafari.com/64/26/fDOZxE.png);
  background-size: cover;
  height: 100vh;
}
#form {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  background-color: white;
  border-radius: 7px;
}

table {
  background-color: white;
  border-radius: 7px;
}

#welcome-content {
  color: white;
}
</style>

欢迎使用Sam的ToDo应用程序！

此应用程序允许您创建任务、删除和修改。
稍后再来查看更多功能。如果你想看到更多，
请给我们留言！

请进行更改并单击“更新”
>
更新
取消
创建新任务
标题
说明
{{`${tasks.name}`}
{{`${tasks.description}}}}
删除
编辑
从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
id:``，
任务：[]，
表格：{}，
姓名：“，
说明：“，
路由：“/api/tasks/”，
编辑：false，
当前任务：{}，
};
},
挂载：函数（）{
this.getTasks（）；
},
方法：{
getTasks（）{
axios
.得到（这条路线）
。然后（{data}）=>{
this.tasks=[…数据]；
})
.catch（（e）=>{
控制台日志（e）；
});
},
getCurrentTask（id）{
this.currentTask=id；
},
createTasks（）{
axios
.post（this.route，this.form）
.然后（（）=>{
this.getTasks（）；
this.form={}；
})
.catch（（e）=>{
控制台日志（e）；
});
},
删除任务（id）{
axios
.delete（this.route+id）
。然后（（结果）=>{
控制台日志（结果）；
this.getTasks（）；
this.form={}；
})
.catch（（e）=>{
控制台日志（e）；
});
},
更新任务（id）{
axios
.put（this.route+id，this.currentTask）
。然后（（结果）=>{
控制台日志（结果）；
this.getTasks（）；
})
.catch（（e）=>{
控制台日志（e）；
});
},
},
};
.容器液体{
背景图片：url(https://cdn.wallpapersafari.com/64/26/fDOZxE.png);
背景尺寸：封面；
高度：100vh；
}
#形式{
盒子阴影：0 1px 3px 0 rgba（0,0,0,0.1），0 1px 2px 0 rgba（0,0,0,0.06）！重要；
背景色：白色；
边界半径：7px；
}
桌子{
背景色：白色；
边界半径：7px；
}
#欢迎内容{
颜色：白色；
}

您可能需要检查模板和脚本
1.getCurrentTask（）方法仅分配id。您可能需要这样做
2.模板中
``
3.脚本中的getCurrentTask（任务）方法
this.currentTask=task.id；
this.form.name=task.name；
this.form.description=task.description；
4.我建议对数据进行建模，类似于，而不是将currentTask和form用作不同的OBEJCT
{
任务：[]，
格式：{name:，description:，id:}，
路由：“/api/tasks/”，
编辑：false，
}

You might want to check you template and script
 1. getCurrentTask() method only assigns the id. You might want to do this
 2. In template

    `<button class="btn btn-warning" @click="edit=true;getCurrentTask(task);">`

 3. In script getCurrentTask(task) method

    this.currentTask = task.id;
    this.form.name=task.name;
    this.form.description=task.description;

 4. I would suggest modelling of data also something like instead of using currentTask and form as different obejcts

   
{
      tasks: [],
      form: {name:"",description:"",id:""},
      route: "/api/tasks/",
      edit: false,
    }