javascript - 使用 Vue 时从烧瓶 api 迭代和显示结果的问题

Question

我第一次学习 Flask/Vue 教程（在https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/找到）我正在尝试使其适应我的需要。为了保存列出完整代码，我似乎遇到问题的部分在这里：

<table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">Note</th>
              <th scope="col">User</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(note, index) in notes" :key="index">
              <td>{{ note.note }}</td>
              <td>{{ note.index }}</td>
              <td>
                <div class="btn-group" role="group">
                  <button
                          type="button"
                          class="btn btn-warning btn-sm"
                          v-b-modal.note-update-modal
                          @click="editNote(note)">
                      Update
                  </button>
                  <button
                          type="button"
                          class="btn btn-danger btn-sm"
                          @click="onDeleteNote(note)">
                      Delete
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

并且更新 html 表的函数created()是：

  methods: {
    getNotes() {
      const path = 'http://localhost:5000/api/v1/resources/notes/';
      axios.get(path)
        .then((res) => {
          this.notes = res.data.notes;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
...

出于某种原因，在教程版本中，HTML 表完美地更新了数据库元素，但是当我尝试更改字段名称后它不会，而且我无法发现我的错误。

我尝试使用 console.log(res) 代替函数并记录数据，但似乎提供的函数无法使用我的字段名称工作。

任何人都可以让初学者摆脱痛苦吗？

提前致谢

标签： javascripthtmlvue.jsflask