Vue questionnaire v-for nesting, how to distinguish the respective click events and add the corresponding style?

The

view is shown in the figure:
clipboard.png

vue:

js

:

clipboard.png

main question: only one answer can be selected for each question (implemented), the color is like the picture, and the questions do not affect each other.

the json format of the question is as follows: 

        quesInfo:{
            titleList:[
                {titleno:"Q1",title:"",name:"q1",option:["","","","",""]},
                {titleno:"Q2",title:"",name:"q2",option:["","","","","U","APP",""]},
                {titleno:"Q3",title:"APP",name:"q3",option:["","","","",""]},
                {titleno:"Q4",title:"",name:"q4",option:["","","","",""]},
                {titleno:"Q5",title:"APP",name:"q5",option:["","",""]},
                {titleno:"Q6",title:"APP",name:"q6",option:["","",""]},
                {titleno:"Q7",title:"APP",name:"q7",option:["","",""]},
                {titleno:"Q8",title:"APPAI",name:"q8",option:["","",""]},
                {titleno:"Q9",title:"APP",name:"q9",option:["","",""]},
            ],
        },
Vue.js javascript html5
Aug.05,2021

after obtaining the data, you can further initialize the option to this format [{name: "satisfied", checked: false}, {name: "satisfied", checked: false}] and then click as long as you change the corresponding checked value, so that you can finally use the true or false of checked to determine which one has been selected.

according to the data structure of the subject, it can be written in this way, which can be changed in three places: 

:class="activeClass === `${item.name}-${index}` ? 'answerSelected' : ''

@click="getAnswer(item.name, index)"

getAnswer (name, index) {
  this.activeClass = `${name}-${index}`
}

provides an idea: 

option
option:[
                    {
                        value:10,
                        status:0,//01
                        label:'',
                    },
                    {
                        value:11,
                        status:0,//01
                        label:'',
                    },
                    {
                        value:12,
                        status:0,//01
                        label:'',
                    },
                ],

Click event: @ click=handleClick (option.value), then loop the list, to set status,
style according to value,:: class=' {active:item.option.status = 1}'

activeClass [item.titleno] = = index? 'answerSelected':'' 

<ul class="detail_list">
    <li class="detail_box" v-for="(item,i) in quesInfo.titleList">
        <p class="detail_questions"> {{item.titleno}}. {{item.title}}

        <label :for="item.titleno+index"
               class="detail_answer"
               v-for="(ites,index) in item.option"
               :class="activeClass[item.titleno] == index ? 'answerSelected':''"
        >
            <input type="radio"
                   :name="item.name"
                   :value="{titleno:item.name,results:index}"
                   v-model="arr[i]"
                   :id="item.titleno+index"
                   style="opacity: 0"
                   @click="getAnswer($event, item.titleno, index)"
            >
            {{ites}}
        </label>
    </li>
</ul>


   
getAnswer:function (e, radioGroupName, i) {
    // this.activeClass = {};
    this.activeClass[radioGroupName] = i;
}

[ https://jsfiddle.net/scroller.]]

this.$set(this.quesInfo.titleList[i],'status',index)   

@click="getAnswer(i,index )"

 :class="index == item.status ? 'answerSelected':''"

Previous: "Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH"

Next: In the table component of the iview framework, how to add a detail, click on the pop-up window to display the detailed information?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu