如何使用 Vue JS 在模态窗口中定位正确的 ID？

Question

我目前正在学习使用 Axios 在 TodoList 项目上将 Vue JS 前端与基于 Node.js 和 Express 构建的基本 API 连接起来。

我的问题如下：

我已经把所有的连接都连接到前面了。我设置了不同的请求，例如添加、删除或显示。我的问题是我将“编辑”按钮配置为启动模式窗口，但我无法正确定位正确的项目（显示我的所有项目。）以便能够发出编辑请求 PATCH。

当我点击“编辑”按钮时，如何在我的数据库中定位正确的 id 以便只能编辑这个 id。

<div v-for="todo in todos" :key="todo">
        <div class="modal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Modification</h5>
                <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <input type="text" v-model="changeTodo" />
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-dismiss="modal"
                >
                  Cancel
                </button>
                <button
                  v-for="todo in todos"
                  :key="todo.id"
                  type="button"
                  class="btn btn-primary"
                  @click="updateTodo(todo.id)"
                >
                  Modification {{ todo.id }}
                </button>
              </div>
            </div>
          </div>
        </div>
        <li
          class="card-title d-flex align-items-center justify-content-between h1"
        >
          {{ todo.title }}
          <div>
            <button
              type="button"
              class="btn btn-outline-success btn-sm mr-2"
              data-toggle="modal"
              data-target=".modal"
            >
              Change
            </button>

---

export default {
  name: "TodoList",
  data() {
    return {
      todos: null,
      newTodo: "",
      changeTodo: ""
    };
  },
  methods: {
    async getAllTodos() {
      const response = await axios.get("http://localhost:4000/api/todos");

      this.todos = response.data;
    },
    addTodo() {
      axios.post("http://localhost:4000/api/todos", {
        title: this.newTodo
      });
      this.newTodo = "";
    },
    deleteTodo(id) {
      axios.delete(`http://localhost:4000/api/todos/${id}`);
    },
    updateTodo(id) {
      axios.patch(`http://localhost:4000/api/todos/${id}`, {
        title: this.changeTodo
      });
    }
  },
  mounted() {
    this.getAllTodos();
  }
};

Answer 1

您是否尝试将按钮中的 v-for="todo in todos" 更改为其他名称，可能存在范围问题，因为您的父迭代变量被称为相同。