Vue3 Todo应用出现todos重复键错误且待办列表无法显示

问题1：Duplicated key 'todos'报错解决 #

原因：App.vue中同时在props和data配置项中定义了同名属性todos，Vue组件的props和data属性都会挂载到组件实例上，不允许重名。且App作为根组件，不需要接收外部传入的todos属性。
解决：直接删除App.vue中props: ['todos']这一行配置即可。

问题2：待办列表无渲染解决 #

有三处配置遗漏需要修复：

• List组件缺少必要的props传递与声明
  你在App.vue模板中调用List组件时，没有传递它需要的todos属性，以及控制列表显隐的dataIsLoaded属性；同时List组件自身也没有声明dataIsLoaded这个prop，导致v-if="dataIsLoaded"始终为false，列表不渲染。

  1. 修改App.vue的模板部分：

  <template>
    <div id="app">
      <Header/>
      <!-- 给List组件传递props -->
      <List :todos="todos" :data-is-loaded="dataIsLoaded"/>
      <Footer/>
    </div>
  </template>
  

  2. 修改List.vue的props声明：

  export default {
    name: 'List',
    components: { TodoItem },
    props: ['todos', 'dataIsLoaded'] // 新增dataIsLoaded声明
  }
  

• 没有发起接口请求拉取待办数据
  你在App的data里定义了请求地址url，但没有实际发起请求，todos数组一直为空，dataIsLoaded也始终为false。在App.vue中新增mounted生命周期钩子发起请求：

export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },
  data() {
    return {
      url: "https://jsonplaceholder.typicode.com/todos?&_limit=5",
      dataIsLoaded: false,
      isValidInput: true,
      todos: [],
      unsolvedTodos: [],
      newTitle: "",
    }
  },
  // 新增mounted钩子
  mounted() {
    axios.get(this.url).then(res => {
      this.todos = res.data
      this.dataIsLoaded = true
    })
  }
}

• 后续交互补充说明（不影响当前渲染）
  TodoItem组件中调用的toggleTodo、deleteTodo方法尚未定义，你后续可以在App.vue中实现这两个方法，通过Vue自定义事件的方式完成父子组件通信即可。

内容的提问来源于stack exchange，提问作者Razvan Zamfir