需求: 单选多选判断题。
由于单选和判断性质一样,这里我就只写下单选和多选题;
大概实现这样的效果:
在这里插入图片描述
返回的数据格式大概是这样:

[
 {
    "id": "0f78fab04fab11eaabe802429c67f104",
     "answeroptions": [
         "A.选项一",
         "B.选项二",
         "C.选项三",
         "D.选项四"
     ],
     "questioncontent": "请选择下列正确选项"
  },
  {
    "id": "0f78fab04fab11eaabe802429c67f105",
     "answeroptions": [
         "A.选项一",
         "B.选项二",
         "C.选项三",
         "D.选项四"
     ],
     "questioncontent": "请选择下列正确选项"
  },
]

单选题:

<div class="e-content" v-for="(item,index) in singleChoiceInfo" :key="item.relationsubject">
    <div class="e-top">
        {{index+1}}{{item.questioncontent}}
    </div>
    <div class="e-cent">
        <div class="" v-for="(ite,ind) in item.answeroptions" :key="ind"
        :class="{
            btns:container1[index] == ind
        }">
            <div class="e-cent1" @click="check1(ite,ind,index)">{{ite}}</div>
        </div>
    </div>
</div>
methods:{
	check1: function(itm,ind,index){
     	this.$set(this.container1,index,ind)
    },
}

check1是个点击事件,v-for循环的singleChoiceInfo是单选题的数据来源,也就是上面的展示数据,container1是个初始化定义的空数组(用来接收点击后的参数),每次点击使用$set方法修改container1,使得视图可以及时刷新。
多选题:

<div class="e-content" v-for="(item,index) in mutipleChoiceInfo" :key="item.relationsubject">
    <div class="e-top">
       {{index+1}}{{item.questioncontent}}
    </div>
    <div class="e-cent" v-if="container2.length>0">
        <div class="" v-for="(ite,ind) in item.answeroptions" :key="ind"
        :class="{
            btns:container2[index].indexOf(ind)>-1
        }"
        >
            <div class="e-cent1" @click="chenk2(ite,ind,index)">{{ite}}</div>
        </div>
    </div>
</div>
methods:{
	chenk2: function(itm,ind,index){
       let arrIndex = this.container2[index].indexOf(ind)
       if(arrIndex>-1){
            this.container2[index].splice(arrIndex,1)
        }else{
            this.container2[index].push(ind)
        }
	},
	transformation: function(){
       for(let i=0,mutI = this.mutipleChoiceInfo.length;i<mutI;++i){
            this.container2.push([])
        }
    },
},
mounted(){
   this.transformation()
}

同上check2是个点击事件,v-for循环的mutipleChoiceInfo是多选题的数据来源,也就是上面的展示数据,container2是个初始化定义的空数组(用来接收点击后的参数),我在页面加载完之后会调用一个transformation()方法,往container2中push进和数据源length相等的空数组,这样方便下一步点击事件时修改,然后通过indexOf()方法,点击事件发生时,判断点击的这个选项是否存在于对应的数组中,不存在则加入,存在则删除。

Logo

前往低代码交流专区

更多推荐