vue + vant 实现问卷调查

感觉这个作者的挺好用，记录一下，避免排版

<template>
  <div class="wrap">
    <div>
      <van-nav-bar title="问卷调查" right-text="提交" right-arrow @click-right="save" />
      <van-notice-bar
        left-icon="volume-o"
        text="活动时间: 2023年4月4日 至2023年12月31日  奖品设置: 奖励程序员一个。"
      />
      <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>
  </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: [],
    };
  },
  methods: {
    tree() {
      console.log(this.data, 'datata');
    },
    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 + 1, value: '' })
          } else {
            result.push({ index: i + 1, value: [] })
          }
        }
      }
      console.log('result==>', result)
      this.result = result
    },
    save() {
      this.result.forEach((item) => {
        if (!item.value.length > 0) {
          Dialog({ message: '请把所有题都答完' })
        } else {
          // 多选
          if (item.value.length > 1) {
            this.personalAnswer.push(item.value.toString())
          } else {
            this.personalAnswer.push(item.value)
          }
          console.log('personalAnswer==>',this.personalAnswer)
        }
      })
    },
  },
  mounted() {
    this.tree();
  },
  created(){
      this.setResult()
  }
};
</script>

<style scoped>
.subject {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.van-radio,
.van-checkbox {
  padding-top: 10px;
}
</style>