vue实现调查问卷一页一题，上一题下一题形式

使用了vant组件的radio 单选框官网https://youzan.github.io/vant/#/zh-CN/radio

做出来的效果图就是上面那样一页一题

附上代码：

<template><div class="second"><!-- 问卷题 --><div v-for="(item,index) in questionList" :key="item.id">    <!-- 测试 --><div class="test-content" v-if="index== page"><div class="test-title" v-if="item.mqyid == 5">平和体质--健康派</div><div class="test-title" v-if="item.mqyid == 8">气虚体质--气短派</div><div class="test-title" v-if="item.mqyid == 9">阳虚体质--怕冷派</div><div class="test-title" v-if="item.mqyid == 10">痰湿体质--痰派</div><div class="test-title" v-if="item.mqyid == 11">湿热体质--长痘派</div><div class="test-title" v-if="item.mqyid == 12">血瘀体质--长斑派</div><div class="test-title" v-if="item.mqyid == 13">特禀体质---过敏派</div><div class="test-title" v-if="item.mqyid == 14">气郁体质---郁闷派</div><div class="test-title" v-if="item.mqyid == 15">阴虚体质---缺水派</div><div class="content-title">{{index+1}}.{{item.question}}</div><van-radio-group  v-model="radio"><van-radio :name="item.answer1Num  + ',' + item.id">{{item.answer1}}</van-radio><van-radio :name="item.answer2Num  + ',' + item.id">{{item.answer2}}</van-radio><van-radio :name="item.answer3Num  + ',' + item.id">{{item.answer3}}</van-radio><van-radio :name="item.answer4Num  + ',' + item.id">{{item.answer4}}</van-radio><van-radio :name="item.answer5Num  + ',' + item.id">{{item.answer5}}</van-radio></van-radio-group><div class="btn"><div class="back" @click="toBack(index)" v-if="index != 0" :class="index == 0 ? 'before-back' : 'back' ">上一题</div><div class="next" @click="toNext(index,item.id)" v-if="isShow"  :class="index == 0 ? 'next' : 'before-next'">下一题</div><!-- 提交 --><div class="next" v-if="!isShow" @click="submit(item)" :class="index == 0 ? 'next' : 'before-next'">提交</div></div></div></div></div>
</template>export default {name: 'SecondQuestionnaire',data() {return {// 当前页page: 0,// 选项radio: '',// 题目的idids: [],// 分数nums: [],// 性别gender: '',// 年龄age: '',// 存放每一题的id和numquestionInfos: [],// 当前题目的序号等于当前题目的条数isShow: true,// 获取问卷数据questionList: []}},created() {// 接受上一层传来的数据this.gender = this.$route.params.genderthis.age = this.$route.params.age// 获取问卷数据this.getQuestion()},methods: {// 获取问卷数据async getQuestion() {const data = await this.$http.get('/questionList?openId=123123')if(data.status !== 200) {return this.$Toast.fail('获取调查问卷题失败')}this.questionList = data.data.question1          },// 点击下一题toNext(index, id) {// 1. 判断是否答题，没有则无法跳转到下一题if(index === 0) {if((this.radio.slice(0,1) === '' || this.radio.slice(0,1) === undefined)) {return;}} else {if(this.radio.slice(2) != id) {return;}}// 2. 保存答题数据let question = {'ids': this.radio.slice(2), 'nums': this.radio.slice(0, 1),};this.questionInfos[index] = question;this.questionInfos.forEach(questionInfo => {// console.log('questionInfo:[ids: ' + questionInfo.ids + ', nums: ' + questionInfo.nums + '] ');});// 3. index ++；index ++;// 4. 判断已答题目列表是否包含下标为index的题目，有则回显if(this.questionInfos[index] !== undefined && this.questionInfos[index] !== '') {this.radio = this.questionInfos[index].nums + ',' + this.questionInfos[index].ids;}// 5. page ++this.page ++;// 6. 其他（如按钮隐藏）// 当前页等于最后一题 下一题按钮隐藏if(this.page == this.questionList.length-1) {return this.isShow = false} else {return this.isShow = true}},// 点击上一题toBack(index) {// 1. index --；index --;// 2. 从已回答列表中获取答题数据，回显this.radio = this.questionInfos[index].nums + ',' + this.questionInfos[index].ids;// 3. 保存答题数据let question = {'ids': this.radio.slice(2), 'nums': this.radio.slice(0, 1)};this.questionInfos[index] = question;// 4. page --this.page --;},// 点击提交async submit(n) {for(var i = 0; i < this.questionInfos.length; i++) {this.ids[i] = this.questionInfos[i].idsthis.nums[i] = this.questionInfos[i].nums}// 发现点击最后一题时用户点击提交 打印出来少一条最后一页的数据  // 用户点击提交 手动将最后一条数据添加到数组中this.ids.push(this.radio.slice(2))this.nums.push(this.radio.slice(0,1))const data = await this.$http.post(`saveQuestions?openId=123123&ids=${this.ids}&nums=${this.nums}&age=${this.age}&gender=${this.gender}`)if(data.data.code == 200) {this.$router.push({name: 'Muggy',params: {typeTitle: data.data.mobuserQuestionnaireType.typeTitle,performance: data.data.mobuserQuestionnaireType.performance,describetion: data.data.mobuserQuestionnaireType.describetion,method: data.data.mobuserQuestionnaireType.method}})}},}
}

vue实现调查问卷一页一题，上一题下一题形式相关推荐

织梦?php?调用栏目,dedecms列表页内容页模板调用上一个栏目下一个栏目方法
织梦CMS内容页有上一篇下一篇文章,没有上一个栏目下一个栏目,我们可以不用修改程序内核文件,直接在模板里用"runphp"输出上一个栏目和下一个栏目. 上一个栏目下一个栏目标签写法 ...
php 答题一页一题,微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题...
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容代码 answer.wxml 全民答题总共1/10题 {{index+1}}: {{item.t ...
微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题
想要的效果 1.第一页只显示第一道题的内容,如图红框 2.答题后,点击下一题,内容显示第二道题的内容代码 answer.wxml <!--pages/answer/answer.wxml--& ...
计算机平面设计专业技能怎么填,计算机平面设计专业毕业生情况调查问卷
<计算机平面设计专业毕业生情况调查问卷>由会员分享,可在线阅读,更多相关<计算机平面设计专业毕业生情况调查问卷(7页珍藏版)>请在人人文库网上搜索. 1.计算机平面设计专业毕业 ...
计算机应用基础问卷答题,计算机应用基础调查问卷
<计算机应用基础调查问卷>由会员分享,可在线阅读,更多相关<计算机应用基础调查问卷(2页珍藏版)>请在人人文库网上搜索. 1.计算机应用基础调查问卷(多项选择)1. 你是否对计 ...
基于Springboot的调查问卷管理系统
[毕业设计]基于Springboot的在线调查问卷系统主要看视频上的演示吧 1.在线调查模块用浏览器打开系统后,使用某个普通用户身份登陆系统,确保已经在"问卷管理页面"使问卷得 ...
python考试编程题九道_一道逻辑推理题的程序实现（纯属娱乐）
一份逻辑推理题的程序求解(纯属自娱自乐) 闲来无聊,看到QQ空间上转载了一份变态推理题的,至少表示我看了十多分钟无处下手,认识的人中有大神居然真的做出来了...我不知道他是们那么做的,不过作为编程爱好 ...
（已解决）微信小程序调查问卷所有题放在一个页面上
最近做一个调查问卷的小程序改需求时遇到了一个问题: 要将所有单选题放在一个页面上,我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来但是每个单选的radioChange绑定事件都是同一 ...
ajax制作调查问卷,div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道...
封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来. 第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 --html-- .mui-input- ...

vue实现调查问卷一页一题，上一题下一题形式

vue实现调查问卷一页一题，上一题下一题形式相关推荐

最新文章

热门文章