vue调查问卷v-for嵌套，如何区分各自的点击事件，并添加对应的样式？

Question

视图如图所示：

vue页面部分代码如下：

    <ul class="detail_list">
        <li class="detail_box" v-for="(item,i) in quesInfo.titleList">
            <p class="detail_questions"> {{item.titleno}}. {{item.title}}</p>
            <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)"
                >
                {{ites}}
            </label>
        </li>
    </ul>

js

        // 获取当前选中答案，控制样式
        getAnswer:function (e) {
            console.log(e.target);
            // this.activeClass = e.currentTarget.id;
        },

尝试过各种值的绑定，目前是绑定id，之前绑定的是下标index，还有i和index的双参数绑定，可是实现效果无法达到预期效果，只能给一个元素绑定，所以问问各位前辈和大佬，这个该如何正确绑定，百度到的都是单层v-for的写法，或许是我太菜了，多了一层v-for就懵逼了，￣□￣｜｜

目前实现的效果如下：

主要问题：每道题只能选中一个答案（已实现），颜色如图，同时实现问题之间互不影响。

问题的json格式如下：

        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:"您是否会推荐您周围的人使用工商银行手机APP做AI投",name:"q8",option:["会推荐","看情况","不会推荐"]},
                {titleno:"Q9",title:"您是否会推荐您周围的人使用工商银行手机APP购买人身保险",name:"q9",option:["会推荐","看情况","不会推荐"]},
            ],
        },

Answer 1

这个你可以在获取数据后，对 option进一步初始化成这种格式 [{name: "很满意", checked: false},{name: "满意", checked: false}] 然后点击只要改变对应 的 checked值就行了，这样你最后在提交的时候 也可以通过 checked 的 true or false 来判断哪个选中了。

Answer 2

按照题主的数据结构可以这样写，分别改三处：

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

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

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

Answer 3

提供一个思路：

改动一下option，
option:[
                    {
                        value:10,
                        status:0,//0表示未勾选，1表示已勾选，
                        label:'很满意',
                    },
                    {
                        value:11,
                        status:0,//0表示未勾选，1表示已勾选，
                        label:'满意',
                    },
                    {
                        value:12,
                        status:0,//0表示未勾选，1表示已勾选，
                        label:'一般',
                    },
                ],

点击事件: @click=handleClick(option.value),然后循环这个list，根据value，设置status，
样式： :class='{active:item.option.status === 1}'

Answer 4

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}}</p>
        <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...]]

Answer 5

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

@click="getAnswer(i,index )"

 :class="index == item.status ? 'answerSelected':''"
 
 差不多这个思路， 具体自己看