Vuejs2 Vue.js：为什么阵列会重置为其原始状态？

我正在尝试从输入读取数据并将数据推送到数组：

notes

。 我看到它发生了，但紧接着

notes

重置为其原始值：

notes:[{title:'Default title'，detail:'Default detail'，}，]，

为什么会发生这种情况？ 我可以通过

v-on:click.prevent=“addNotes”

停止此操作，但为什么会发生这种情况

{{appTitle}}
注释标题
注意细节
提交
{{note.title}

导出默认值{
数据（）{
返回{
注:{
标题：“”，
详细信息：“”，
},
注:[
{
标题：“默认标题”，
详细信息：“默认详细信息”，
},
],
};
},
方法：{
addNotes（）{
const{title，detail}=this.note；
调试器；
这是我的笔记({
标题
细节
日期：新日期（date.now（））.toLocaleString（），
});
},
},
道具：{
appTitle:String，
},
};

之所以会出现这种情况，是因为按钮类型为submit，并且位于表单中。提交按钮的默认行为是发布数据，然后刷新页面。这就是为什么

.prevent

解决方案有效，它会阻止事件传播，并且不会刷新页面以保持您的状态