vue组件的创建异常的相关问题

Question

公司项目过程中碰到一个关于vue组件的问题，要求的样式是类似客户端的listView，带分组，然后在实现的过程中采用vue实现（问题最后有效果图）
数据的格式是：

          [
           {key:value,key:[]},
           {key:value,key:[]}
          ]

实现的代码是这个样子的：
调用：<task-map-item v-for="(taskType,taskList) in taskMaps" :tasktype="taskType" :tasklist="taskList"></task-map-item>

Vue.component('task-map-item', {
    props: ['tasktype', 'tasklist'],
    template: "<div id='headerviewer' class='headViewer'>"//<task-item v-for="task in taskList" v-bind:singletask="task"></task-item>
    + "<div style =\"float:left; margin-left: 15px;\">"
    + "<label v-if=false>asdf</label>"
    + "<label id=\"taskType\" class='taskType' style='background-color: #ebebeb; width: 100%'>任务类型:" + "  {{ tasktype }}" + "</label>"
    + "</div>"
    + "<task-item v-for=\"task in taskList\" v-bind:singletask=\"task\"></task-item>"
    + "</div>",

});
Vue.component('task-item', {
    props: ['singletask'],
    template: "<div id='taskItem' class='taskItem' >"//onclick='showTaskDetail(" + "{{ singletask.id }}" + ")\'
    + "<label id=\"taskName\" class='taskName' style =\"float:left; width: 200px;\">" + "{{ singletask.id }} " + "</label>"
    + "<label id=\"createTime\" class='taskDescription' style =\"float:left;\">" + "{{ singletask.id }}" + "</label>"
    + "<label id=\"taskPriority\" class='taskDescription' style =\"float:left;\">" + "{{ singletask.id }}" + "</label>"
    + "</div>",
});

然后这个样子单独调用其中的task-item是可以正常使用的，但是如果调用task-map-item的话就会报错，附上报错信息：

“[Vue warn]: Property or method "taskList" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in”
“---> <TaskMapItem>”
“<Root>”

求大神能够帮忙解决一下子，我应该怎么改才能正常执行？

附需实现的效果图：

万分感谢！！！

Answer 1

拼写错误

Answer 2

方法 ‘taskList’在.vue文件中用了，但是没有在js中定义，仔细查一遍