vue答题插件

1.分析数据结构

return [
						{
							id:1,
							type:'radio',
							number:1,
							title:'1生物大灭绝是指大规模的集群灭绝，生物灭绝又叫生物绝种。历史上一共有几次大灭绝？',
							imageList:['https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588056060&di=67dc5595a44e90101f524bae2273cc0a&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'],
							question_option:[
								{id:1,name:'A',content:'一次',active:0},
								{id:2,name:'B',content:'二次',active:0},
								{id:3,name:'C',content:'三次',active:0},
								{id:4,name:'D',content:'四次',active:0},
							]
						}
					]

题型应该分为三个类型，单选多选，填空。因此应该在页面内传值给子组件，子组件设置在props接受，并在created生命周期内赋值给data 里的this.newOptList
2，题干分为三部分，题目序号，题目类型，题目内容，因此分别使用id和type进行判断,在data中初始化showQuestionIndex当前题号，isEnd是否为最后一题。题目内容应该判断是否为选择题，选择和填空分来来，选择题选项需要遍历，并设置一个动态的:data-id=“item.id”。
3.method中应该有这样几个方法checkOption选择option选项。因为涉及到单选和多选，因此在写一个方法，checkActive用来进行选中样式的逻辑
参数就是e.currentTarget.dataset.id（将数据中的active选项改为选中提交答案是通过这个判断的）。checkOption调用checjactive然后返回数据，包括当前题目的id和选项的id然后通过this.$emit("checkOption,opt");返回数据到父组件。4.下一题nextQuestionBtn方法。判断一下是否选中，填空题是否有答案因此写一个方法checkTest。调用完checkTest后构建返回数据，并判断是否为最后一题如果不是是最后一题就题号加一，触发事件this.$emit(“nextAnswer”,opt);
如果加一之后就相等了就把isend改为true，当最后一题的时候就执行formatKey，并把构建的数据

let opt = {
					current_id: this.showQuestionIndex,
					isEnd: this.isEnd
				}

作为参数传过去。
5.总的答案整理
formatKey 新建两个数组，

let newAnswer = []
let formatCheck_res = []

一个存放题目行管相关内容，另外一个存放答案相关内容。
对数据进行map循环，在循环里面再建数组并进行判断为选择还是填空，并将循环的数据存放到数组里。选择题需要写一个map循环选项。
最后将结果push到formatCheck_res
然后

newAnswer.push({
						id: item.id,
						type: item.type,
						number: item.number,
						title: item.title,
						keyRes: key_res,
					})

最后把两个数组放到opt里执行this.$emit(‘nextAnswer’,opt)。
其余的应该在computed里面计算一下点击按钮，选项样式的变化，这个可以再父组件里传值过来。