基础Vue待办列表开发：新增列表项不显示问题求助

核心错误点 #

• 双向绑定指令拼写错误：输入框上的v-modell多写了一个字母l，正确语法为v-model。该错误会导致输入内容无法同步到newToDo变量，新增的待办项文本始终为空，看起来就像没有渲染出新条目。
• v-for循环未绑定唯一key：Vue要求列表循环必须绑定唯一key作为节点标识，否则可能触发列表渲染异常，属于Vue开发强制规范。
• 语法细节不规范：add方法内push操作后使用逗号分隔后续赋值语句，虽然JS支持自动分号补全，但建议替换为分号避免潜在语法问题。

修正后完整代码 #

<template>
  <div id="app">
    <div class="container">
      <h1>To Do List</h1>
      <input
        class="input"
        v-model="newToDo"
      />
      <button class="add-button" v-on:click="add()">Add</button>
      <ul style="list-style-type: none;">
        <li v-for="(todo,i) in existingToDo" :key="todo.id">
          <span> 
            {{ i + 1 }}: {{todo.text}}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      newToDo: '',
      existingToDo:[
        {text: 'Get Groceries', id:0},
        {text: 'Run Errands', id:1},
        {text: 'Do Sports', id:3}
      ]
    }
  },
  methods:{
    add(){
      this.existingToDo.push({
        text: this.newToDo,
        id: new Date().valueOf()
      });
      this.newToDo = ''
    },
  }
}
</script>

<style>
</style>

内容的提问来源于stack exchange，提问作者Balazs Kelemen