vue+vant 实现移动端问卷答题

因为工作需要，写一个类似驾考宝典答题的功能，使用 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 + <