VUE这个功能如何实现

Question

考试系统，为了增加抄袭难度，随机生成选项列表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":"没变化",}],},{//第二大题....}]第{{index+1}}大题:{{todo.title}}(共{{todo.bmark}}分){{index2+1}}、{{todo2.stem}}({{todo2.smark}}分)我如何让选项随机排序，并绑定一个事件（点选一个答案就向服务ajax发送保存）？randsmall方法我尝试了拼接选项列表dom的方法，但是不能在这些动态生成的dom里绑定vue事件varvu=newVue({el:'#todo-list-example',data:{all:,methods:{randsmall:function(index,index2){letq=this.all[index].questions[index2];console.log(this.all);letnewarr=[];switch(q.qtype){case'单选':if(q.answer1!=''){str=''+q.answer1+'';newarr.push(str);}if(q.answer2!=''){str=''+q.answer2+'';newarr.push(str);}if(q.answer3!=''){str=''+q.answer3+'';newarr.push(str);}if(q.answer4!=''){str=''+q.answer4+'';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);}}})

Answer 1

是我的话既然要打乱排序，我会在数据内另起一个字段来存储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
                            

Answer 2

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