Hello! Dear friends of the Nuggets, I am # Touchfish. Compared with the previous article, I wrote a technical article about the use of Element UI Tree component, which has made some progress. Your thumbs up and comments are my great motivation to write the article. Hope you can give more support; Thank you very much! Today we will realize the Vue realization of multiple choice and judgment questions!

The text begins ~

The logic of the implementation

The general idea is that after you have written the HTML and style, you can render the data through three loops. The first loop will render the big questions (single choice, multiple choice, and true), the second loop will render the short questions, and the third loop will control the choices of multiple or single choices through the index of each loopCopy the code

The overall data structure is as follows

Rendering of data structures

Let me post the HTML code

We can see that there are three levels of loop, each level of key is an array index parameter to facilitate the following logic and then add a click event to each option, and then pass four values when clicked (loop through the current object item, big item index, small item index, option index) HTML code <div class="question" v-for="(item, index) in questions" :key="index"> <div class="maxTitle">{{item.titleName}}</div> <div class="smallQues" v-for="(item_1,index_1) in item.smallTitle" :key="index_1"> <div class="title">{{ index_1 + 1 }},{{ item_1.title }}</div> <div class="option" v-for="(itemOne, Index1) in item_1.options" :key="index1" > <span>{{itemone. select}}.{{itemone. name}}</span> </div> </div> </div> CSS code  .question { background-color: #f8f9f9; width: 70%; text-align: left; padding: 50px; margin: 0 auto; margin-bottom: 50px; } .smallQues{ margin-top: 20px; } .title { font-size: 18px; font-weight: bold; padding: 10px; } .option { margin-top: 50px; &:nth-child(2){ margin-top: 10px; } } .option span { display: inline-block; background-color: pink; width: 100px; height: 30px; line-height: 30px; border-radius: 10px; margin-right: 50px; text-align: center; } .maxTitle{ font-size: 22px; font-weight: bold; }Copy the code

Realization of multiple choice function (judgment questions)

Then add a click event to each option and highlight the click selection; <span :class=" itemone. checked? <span :class=" itemone. checked? 'active' : SelectClick (itemOne,index,index_1, Index1) >{{itemone. select}}.{{itemone. name}} </span> CSS code :// Highlight style .option span.active { background-color: rgb(19, 212, 247); color: #fff; } JS code: // to achieve radio, simple is click index, layer corresponding data structure index; Until you go to the last layer and change the checked property of the option; True means selected,false means unselected; SelectClick (item,index,index_1,index1) {this.questions[index]. SmallTitle [index_1]. Options.map ((item,idx)=>{selectClick(item,index,index_1,index1) {this.questions[index].  index1==idx? item.checked=true:item.checked=false }) },Copy the code

This is the result of a single choice, you can only pick one, and all of this becomes a single choice

Multiple choice

In the selectClick method, you can add a layer of judgment to distinguish multiple choices. Multiple choices can be selected for a small item, and can be selected and cancelled. Single choices can only be selected for one item, and can not be cancelled. SelectClick (item,index,index_1,index1) {if(index==1){item.checked=! item.checked; }else{ this.questions[index].smallTitle[index_1].options.map((item,idx)=>{ index1==idx? item.checked=true:item.checked=false }) } }, submitClick(){Copy the code

The effect of the final realization

Conclusion:

To be honest, it’s actually quite simple, but I struggled with how to express it so that people could understand it; So there are wrong places welcome to point out, there are not understand the place can comment messages