Vue.js push/upshift不向数组中添加新项。它执行'；我甚至没有显示出任何错误 X {{note.title} {{note.body}} 从“./components/AddNewButton”导入AddNewButton； 导出默认值{ 名称：“附注”， 组成部分：{ AddNewButton， }, 数据（）{ 返回{ 注:[ { 标题：“sunt aut facere repellat”， 正文： “uia和suscipit suscipit suscipit SUCCIPIT SUCCIPATE CONSEQUOTER expedita和REPREHENDERITE MOLESTIA ut QUOTA totam nostrum rerum est AUT rem rem eveniet architecture”， }, { 标题：“不可能的事”， 正文： “威尼斯共和国必须别名为aut fugiat sit autem est”， }, ], 注意：[{标题：''，正文：'}] }; }, 方法：{ 删除注释（索引）{ 本节注释拼接（索引1）； }, addNote（）{ this.notes.unshift（{title:'test'，body:Math.round（Math.random（）*1000）}） } }, };

我发布了一个完整的代码，只是为了弄清楚。我正在做一个笔记应用程序。我尝试了所有的解决方案，但没有任何效果。它没有显示错误。这是现在的完整代码（添加按钮中没有特殊代码，只是一个按钮组件）。

您引用的是

这个。注意

就像它是一个对象一样，因为您访问的是属性

标题

和

正文

，但在您的数据中，

注释

是一个数组

---

另外，您定义

数据的方式不正确，
注释
数组的格式不正确。
是的，我同意@Paul Louis Mas的观点，注释
标题中存在拼写错误。我确实更新了你的代码，看看这个

<template>
  <div class="tc-notes-wrapper">
    <AddNewButton @click="addNote"/>
    <div class="tc-notes">
      <div v-for="(note, index) in notes" :key="index" @deleteNote="deleteNote" >
        <div class="tc-note">
          <div class="tc-note-header">
            <span @click="deleteNote(index)" class="tc-note-close"> X </span>

            <div class="tc-note-title" contenteditable="">
              {{ note.title }}
            </div>
            <div class="tc-note-body" contenteditable="">
              {{ note.body }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AddNewButton from "../components/AddNewButton";
export default {
  name: "Notes",
  components: {
    AddNewButton,
  },
  data() {
    return {
      notes: [
        {
          title: "sunt aut facere repellat",
          body:
            "uia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto",
        },       
        {
          title: "nesciunt quas odio",
          body:
            "repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est",
        },
              
      ],
      note: [{title:'',body:''}]
    };
  },
  methods: {
    deleteNote(index) {
      this.notes.splice(index, 1);
    },
    addNote() {
      this.notes.unshift({ title: 'test', body: Math.round(Math.random() * 1000) })
    }
  
  },
};
</script>


{{note.title}}-{{note.body}
添加注释
导出默认值{
名称：“应用程序”，
数据（）{
返回{
注:[
{
标题：“狩猎”，
身体：“宝贝熊”
},
{
标题：“箭头”，
正文：“鞠躬”
}
]
}
},
方法：{
addNote（）{
this.notes.unshift（{title:'test'，body:Math.round（Math.random（）*1000）}）
}
}
}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
我尝试了删除功能，它工作正常，只是添加一个新功能不起作用。感谢您的回复，但我最初没有这样做，我使用的是“this.notes.unshift（{title:“”，body:“”}）。它不起作用，所以有人向我建议使用该引用方法。谢谢，Naren:）在解决问题方面确实很有帮助，因为我对您的回答很有信心，因为您的回答是函数是正确的，错误在按钮中，而不是函数中。
<template>
    <div id="app">
        <div>
            <div v-for="note in notes">{{ note.title }} - {{ note.body }}</div>
        </div>
        <button @click="addNote">Add Note</button>
    </div>
</template>

<script>
    export default {
  name: 'App',
  data() {
    return {
      notes: [
        {
          title: "hunt",
          body: "babe bear"
        },
        {
          title: "arrow",
          body: "bow"
        }
      ]
    }
  },
  methods: {
    addNote() {
      this.notes.unshift({ title: 'test', body: Math.round(Math.random() * 1000) })
    }
  }
}
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>