因为工作需要,写一个类似驾考宝典答题的功能,使用 vue+vant
待答题页面
<template>
<div>
<van-nav-bar title="问卷调查" right-text="提交" right-arrow @click-right="save" />
<van-notice-bar left-icon="volume-o" text="活动时间: 2020年12月4日 至2020年12月8日 奖品设置: 参与答卷有机会获取30元手机话费,每人有两次答题机会。" />
<div class="maintext">
<div class="subject" v-for="(item, i) in questionList" :key="i">
<div class="question">{
{
item.question }}</div>
<van-radio-group v-if="item.type === 'radio'" v-model="result[i].value">
<van-radio name="A">{
{
item.A }}</van-radio>
<van-radio name="B">{
{
item.B }}</van-radio>
<van-radio name="C">{
{
item.C }}</van-radio>
<van-radio name="D">{
{
item.D }}</van-radio>
</van-radio-group>
<van-checkbox-group v-if="item.type === 'checkbox'" v-model="result[i].value">
<van-checkbox name="A" shape="square">{
{
item.A }}</van-checkbox>
<van-checkbox name="B" shape="square">{
{
item.B }}</van-checkbox>
<van-checkbox name="C" shape="square">{
{
item.C }}</van-checkbox>
<van-checkbox name="D" shape="square">{
{
item.D }}</van-checkbox>
</van-checkbox-group>
</div>
</div>
</div>
</template>
<script>
import {
Dialog } from 'vant'
export default {
data() {
return {
questionList: [
{
type: 'radio',
question: '1、(单选题)选出这学期线性代数课任教',
A: 'A.周星星',
B: 'B.蔡徐坤',
C: 'C.张梁柱',
D: 'D.梁静茹',
},
{
type: 'checkbox',
question: '2、(多选题)以下哪些食品,是您会选择作为礼品送给菜需捆的?',
A: 'A.茶叶',
B: 'B.牛粪',
C: 'C.水果',
D: 'D.狗屎',
},
{
type: 'radio',
question: '3、(单选题)你喜欢什么季节?',
A: 'A.春季',
B: 'B.夏季',
C: 'C.秋季',
D: 'D.冬季',
},
{
type: 'checkbox',
question: '4、(多选题)四大名著你喜欢哪本?',
A: 'A.西游记',
B: 'B.三国演义',
C: 'C.水浒传',
D: 'D.红楼梦',
},
],
result: [],
personalAnswer: [],
}
},
created() {
this.setResult()
},
methods: {
// 根据问题列表生成 result 结构
setResult() {
let result = []
if (!this.questionList.length) {
result = [{
}]
} else {
for (let i = 0; i < this.questionList.length; i++) {
if (this.questionList[i].type === 'radio') {
result.push({
index: i + <