单选题样式和保存答案

<div class="choice-answer" :class="'span_'+index+'_'+ind" v-for="p,i of item.queOptions" :key="i" @click="addAnswer(index,ind,i)">
     <input type="radio" :name="'an_'+index+'_'+ind" value="i+1" style="display:none">
     <span class="rideo" >✔</span> 
     <span class="identity">{{p.serialNum}}.</span>
     <span class="identity2" v-html="p.optionContent"></span>
 </div>

//保存答案
        addAnswer(index,ind,i){
            var ele=document.getElementsByClassName('span_'+index+'_'+ind)
            ele.forEach(e => {
                e.classList.remove( "active");
            });
            ele[i].classList.add( "active");
            var num=0;
            var obj={queId:'',id:''}
            obj.queId=this.questionTypeArr[index][ind].queId
            obj.id=this.questionTypeArr[index][ind].queOptions[i].id
            if(this.answerArr.length){
                for(var ii=0;ii<this.answerArr.length;ii++){
                    if(this.answerArr[ii].queId==obj.queId){
                        this.answerArr[ii].id=obj.id
                        num=2
                    }
                }
            }
            this.m=this.questionTypeArr[index][ind].queOptions[i].id
            if(num!=2){this.answerArr.push(obj)}
            console.log(this.answerArr)
        },

/* 选项开始 */
.choice-answer{
    font-size: 1rem;
    padding: 1.5vmin 0;
    word-wrap:break-word;
    display: block;
    display: flex;
    /* align-items: center; */
}
.choice-answer span{
    display: inline-block;
    margin: 0rem .8rem; 
    margin-right: 0rem;
    color: #333;
}
.identity2{
    width: 70vmin;
}
.choice-answer .rideo{
    width: .9rem;
    height: .9rem;
    font-size: .7rem;
    line-height: .9rem;
    border-radius: 50%;
    color: #fff;
    border: 1px solid #999;
    margin-right: 0rem;
    margin-left: 0vmin;
}
.active .rideo{
    background: #EC6230;
    border: 1px solid #EC6230!important;
    border: 0;
    padding: .0rem;
    text-align: center;
}
.active span{
    color: #EC6230;
}