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 + <
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值