vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；

1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交;
前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式
效果图如下:
答题前显示:

当我答题了以后,题号对应显示该题答题状况:

此时点击提交按钮,提示"未打完,请继续答卷":

完整答题提示:

基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了
最后上代码,供大家参考:

<template>
<el-container>
<el-main>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div v-for="(test, index) in tests" :key="index">
<p>{{index + 1}}.{{test.timu}}</p>
<el-checkbox-group v-if="test.type == '多选'" v-model="test.da">
<!-- label绑定答案的值,可以绑定索引index,也可以绑定答案内容city -->
<el-checkbox
v-for="(city,index) in test.xuanxiang"
:label="index"
:key="index"
>{{city}}</el-checkbox>
</el-checkbox-group>
<el-radio-group v-else-if="test.type == '单选'" v-model="test.da">
<el-radio
v-for="(city,index) in test.xuanxiang"
:label="index"
:key="index"
>{{city}}</el-radio>
</el-radio-group>
<div v-else>
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="test.da"></el-input>
</div>
</div>
</div>
<br />
<!-- <div>
<router-link :to="{name:'first',params:{username:'小灰灰',code:1}}">跳转第1页</router-link>
<router-link :to="{name:'second',params:{username:'小灰灰',code:1}}">跳转第2页</router-link>
<router-link :to="{name:'third',params:{username:'小灰灰',code:1}}">跳转第3页</router-link>
</div>-->
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
<h3>题号:</h3>
<div class="tihao">
<!-- <span class="ti active">{{index + 1}}</span> -->
<div v-for="(test,index) in tests" :key="index">
<span v-if="test.da.length == '0'" class="ti">
{{index + 1}}
<!-- {{key}} -->
</span>
<span v-else class="ti active">{{index + 1}}</span>
</div>
</div>
</div>
<div>
<el-button @click="submitCount" type="primary">提交考卷</el-button>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>

<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
tests: [
{
timu: "我是第一题,多选题",
type: "多选",
xuanxiang: ["A哈哈", "B休息", "C方法", "D晋级"],
// 答案存放数组
da: []
},
{
timu: "我是第二题,单选题",
type: "单选",
xuanxiang: ["AAA烦", "BBB我", "CCC人", "DDD去"],
// 答案存放字符串
da: ""
},
{
timu: "我是第三题,问答题",
type: "问答",
xuanxiang: ["AA反打", "BB烦", "CC粉丝", "DD让人"],
// 答案存放字符串
da: ""
}
]
};
},
created() {},
updated() {
console.log(tests);
},
methods: {
submitCount() {
console.log("提交试卷");
// 是否答完
let isComplete = true;
this.tests.forEach((val,i) =>{
if(val.da.length == 0){
isComplete = false;
return;
}
})

if(isComplete){
// 答题完整,可以提交,在这里进行提交数据操作
alert('交卷成功!');
}else{
alert('未打完,请继续答卷!');
}
}
}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
/* 题目*/
.tihao {
display: flex;
justify-content: space-around;
}
.ti {
display: inline-block;
width: 25px;
height: 25px;
line-height: 27px;
border: 1px solid #bbb;
color: #bbb;
border-radius: 50%;
text-align: center;
}
.active {
background-color: blue;
color: white;
}
</style>

希望文档能帮助到您,最后求个赞,谢谢~