猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

新手上路,VUE这个功能如何实现各位有什么建议？

考试系统，为了增加抄袭难度，随机生成选项列表ABCD
数据结构大概是
[{
大题1{
[小题1，小题2...]
}
}]
[{
"qtype":"单选",
"title":"第一大题",
"questions":[{
"qid":1,//第1小题
"qtype":"单选",
"smark":"1",
"stem":"网页元素不包括：（）",
"answer1":"文字",
"answer2":"图片",
"answer3":"界面",
"answer4":"视频",
},{
"qid":2,//第2小题
"qtype":"单选",
"smark":"1",
"stem":"文本被做成超链接后，鼠标移到文本，光标会变成什么形状（）",
"answer1":"手形",
"answer2":"十字形",
"answer3":"向右的箭头",
"answer4":"没变化",
}],
},
{
//第二大题....
}]
{{index2+1}}、{{todo2.stem}}({{todo2.smark}}分)

我如何让选项随机排序，并绑定一个事件（点选一个答案就向服务ajax发送保存）？randsmall方法我尝试了拼接选项列表dom的方法，但是不能在这些动态生成的dom里绑定vue事件
varvu=newVue({
el:'#todo-list-example',
data:{
all:question?>,
methods:{
randsmall:function(index,index2){
letq=this.all[index].questions[index2];
console.log(this.all);
letnewarr=[];
switch(q.qtype)
{
case'单选':
if(q.answer1!=''){
str='
';
newarr.push(str);}
if(q.answer2!=''){
str='
';
newarr.push(str);}
if(q.answer3!=''){
str='
';
newarr.push(str);}
if(q.answer4!=''){
str='
';
newarr.push(str);}
}
shuffle(newarr);
returnnewarr.join('');
break;
case'多选':
return'多选项';
break;
case'填空':
return'填空';
break;
case'判断':
str='';
str=str+'';
returnstr;
break;
case'排序':
return'排序';
break;
case'问答':
return'';
break;
}
returnnewarr.join('
');
},
selkey:function(e){
console.log(e.currentTarget);
}
}
})

			

				
动漫人物

				
浏览 204回答 2

			

			
			
		

		


		

		

			
			
2回答

			

				
				

					
					
青春有我

					
是我的话既然要打乱排序，我会在数据内另起一个字段来存储ABCD随机对应答案1-4,渲染的时候以这个新的字段循环渲染，提交的时候匹配原有的答案编号进行提交。{"qid":2,//第2小题"qtype":"单选","smark":"1","stem":"文本被做成超链接后，鼠标移到文本，光标会变成什么形状（）","answer1":"手形","answer2":"十字形","answer3":"向右的箭头","answer4":"没变化","showRadio":{A:2,B:3,C:1,D:4}}渲染选项的时候{{qustion['answer'+value]}}js拼接的html代码应该是没有经过vue处理的所以点击事件无效，具体也有解决方案来着，不过没弄过，最好不要写在js里，js和html混在一起代码实在不好读。要的话也是用组件来实现。或者template

					

						

							
							
						

						
0

					

				

				
				

					
					
心有法竹

					
使用render函数test.jsexportdefaultVue.component('test',{data(){return{}},render(h){returnh(Vue.extend({template:``,//拼接字符串,data(){return{}}}))}})

					

						

							
							
						

						
0

					

				

				
			

			
		

		

			
			打开App，查看更多内容
		

	
	

	随时随地看视频慕课网APP


	
	
	

		
相关分类

		

			
			

			
				 JavaScript