Vue.js调试：新手开发时任务列表数据无法显示该如何排查

核心错误：Tasks.vue 组件注册语法错误 #

你在Tasks.vue的script部分把组件注册字段components写成了单数形式component，导致Task组件没有被正确注册，Vue无法识别<Task />标签，所以数据无法正常渲染。

原错误代码：

export default {
    name: "Tasks",
    props: {
        tasks: Array
    },
    component: {
        Task
    }
}

修正后代码：

export default {
    name: "Tasks",
    props: {
        tasks: Array
    },
    components: {
        Task
    }
}

其他可选优化点 #

• Header.vue的模板里你把三个Button按钮放在了h1标签内部，和你写的header flex布局不匹配，会导致排版和教程演示效果不一致，建议把Button移到h1外部，和h1平级即可。
• Task.vue里你写了.task .reminder的样式，但是还没有给task元素绑定reminder动态类，后续要做提醒功能的时候记得给task的div加上:class="{ reminder: task.reminder }"。

修正完Tasks.vue的组件注册字段后，重启本地服务就可以正常渲染tasks数据了。

内容的提问来源于stack exchange，提问作者code-8