Vue组件中addItem方法无法向数组添加元素问题求助

你的代码里有两个核心问题导致新条目无法正常加载显示：

1. 表单默认提交行为未阻止 #

点击<button type="submit">时，浏览器会自动触发表单的默认提交动作，导致页面刷新——刚添加到TodoItems的条目会因为页面重新加载直接丢失。

解决办法（二选一即可）：

• 方案一：阻止事件默认行为
  修改按钮的点击绑定，传入事件对象：

  <button type="submit" v-on:click="addItem($event)">Submit</button>
  

  然后在addItem方法里添加阻止代码：

  addItem(event) {
    event.preventDefault(); // 阻止表单默认提交
    // ... 原有创建新条目的代码
  }
  

• 方案二：修改按钮类型
  直接把按钮的type从submit改成button，彻底避免触发表单提交：

  <button type="button" v-on:click="addItem">Submit</button>
  

2. ID生成逻辑存在隐患 #

用this.TodoItems.length作为新条目的id，如果后续添加删除条目的操作，会出现重复的id，导致v-for的:key失效（Vue要求:key必须唯一）。

优化建议：
改用时间戳生成唯一ID：

const newItem = {
  id: Date.now(), // 时间戳保证ID唯一
  text: this.newItemText,
  completed: false
}

内容的提问来源于stack exchange，提问作者Rens Jespers