Javascript 使用Vue时迭代和显示flask api结果时出现问题

我第一次学习了Flask/Vue教程（在上找到），我正在尝试调整它以满足我的需要。为了保存完整代码清单，我似乎有问题的部分如下：

<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表会使用数据库元素进行完美的更新，但是当我尝试更改字段名称后，它不会更新，并且我无法发现错误

我尝试过用console.log（res）代替函数，它记录数据，但似乎使用我的字段名提供的函数不起作用

有人能让初学者摆脱痛苦吗

---

提前感谢

那么

console.log（res.data）

会产生什么呢？如果你的

res.data.notes

存在，你能在

this.notes=res.data.notes

console.log（res.data）之后尝试一下console.log（this.notes）吗{Note:“test”，User:“Nicky”，id:3}3:{Note:“test”，User:“Nicky”，id:4}4:{Note:“test reach”，User:“Nicky”，id:6}这是我从数据库中得到的虚拟数据，我想用.console.log（this.notes）更新html字段，产生一个错误，“意外控制台”好了，你的api数据中没有

notes

属性。它似乎是一个数组。还要注意（双关语）大写的

note

，而不是

note

。只是确认一下，这正如我预期的那样工作！非常感谢你的帮助

  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);
        });
    },
...