vue.js生成的调查问卷，如何获取问卷列表的值？

Question

问卷列表截图：

json数据格式为：

            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:["会推荐","看情况","不会推荐"]},
            ],

vuejs遍历代码为：

        <li class="detail_box" v-for="item in quesInfo.titleList">
            <p class="detail_questions"> {{item.titleno}}. {{item.title}}</p>
            <span class="detail_answer" @click="answerChoose(item.titleno,index)" v-for="(ites,index) in item.option">
                <input type="radio" :name="item.name" :value="index">
                {{ites}}
            </span>
        </li>

然而遍历出来后，样式是这样的。。。

主要问题是:
1、如何去掉input的radio样式，同时还是单选，每道题目的单选项span标签变成蓝色边框和字体？(大佬们说个思路即可，当然能够代码实现的感激不尽^_^)

2、问卷列表的答案如何获取？目前希望最终的格式如下：(还是希望大佬们给提供个简单的思路，目前主要还是卡在这里￣□￣)

 “titleno”（代表题号），"results"（所属题目答案的下标）

            answerList:[
                {titleno:"Q1",results:''},
                {titleno:"Q2",results:''},
                {titleno:"Q3",results:''},
                {titleno:"Q4",results:''},
                {titleno:"Q5",results:''},
                {titleno:"Q6",results:''},
                {titleno:"Q7",results:''},
                {titleno:"Q8",results:''},
                {titleno:"Q9",results:''}
            ],

Answer 1

想去掉input的样式，你可以用css来控制
第二个只要把最终选的答案转换一下就好了呗

Answer 2

首先, 第一问:

1、如何去掉input的radio样式，同时还是单选，每道题目的单选项span标签变成蓝色边框和字体？

可以把radio的样式设成透明, 给span定义一个类名比如说selected, 根据事件切换

input[radio] {
    opacity: 0;
}
.selected {
    border: 1px solid lightblue;
    color: lightblue;
}

只能选一个可以参考vue官方文档单选按钮, 给每一问设置相同的v-model即可

第二问:

2、问卷列表的答案如何获取？

获取绑定在单选按钮上的v-model的值即可

Answer 3

给你一段我写问卷时的代码，样式我就不说了/
<el-form-item>
  <div>{{问题描述}}</div>
      <el-radio-group v-model="ruleForm.radio[item]" @change='dealwidthradioResult'>
           <el-radio :label="child.id" v-for="child in item.option" :key="child.id">{{child.name}}</el-radio>
       </el-radio-group>
</el-form-item>

mounted（） {

let len =问题的总个数；
for(let i=0;i<len;i++) {
    this.ruleFormthis.radio.push('')
}

}
methods:{

dealwidthradioResult(val) {
    打印出来val是选中项组成的数组。接下来自己拼成你后台要的格式
}

}