使用radio做出问答题。。。

<div class="con">
    <top-header :tit="tit"></top-header>
    <div class="decisionDescripe">
        <div class="decisionTitle">
            <P>{{decisionList.dt_title}}</P>
            <div class="titleBottom">
                <div class="titleTime">{{decisionList.dt_createtime|dateformat('YYYY-MM-DD')}}</div>
            </div>
        </div>
        <div class="decisionCon">
            <p>
                {{decisionList.dt_descripe}}
            </p>
        </div>
    </div>
    
    <div class="decCon">
        <div v-for="(item,index) in problemlist" :key='item.index' class="decList">
                <div class="decP">
                    <p>
                        {{item.dp_id}}:{{item.dp_problem}}
                        <!-- 这是测试数据，这是测 -->
                    </p>
                </div>
                <div class="radioSet">
                    <div v-for="(op,num) in options" :key="op.num" class="radioList">
                        <div class="radioSpan">
                            <div class="btnspan">
                                <label>
                                    <span><input type="radio" class="radioInput" :name="item.dp_id" @change="test(item.dp_id,op.value)"></span>
                                    <span class="spanLabel">{{op.label}}</span>
                                </label>
                            </div>
                        </div>
                        
                    </div>
                </div>
            <!-- <div>
                <mt-radio :title="item.dp_problem"  :options="options" align="right"
                
                @change="test(item.dp_id,options.value)">
                </mt-radio>
            </div> -->
        </div>
        
    </div>
    <div class="submitBtn" @click="submitBtn">提交</div>
</div>

import TopHeader from “@/components/TopHeader”;
import { DatetimePicker } from ‘mint-ui’
export default {
name: “decisiondetails”,
components: {
TopHeader,
},
data() {
return {
tit: “决策”,
decisionList:[],
problemlist:[],
voteitemList:[],
options:[
{
label: ‘赞同’,
value: ‘0’
},
{
label: ‘反对’,
value: ‘1’
},
{
label: ‘弃权’,
value: ‘-’
}
],
// v_value:"",
};
},
mounted(){
// initialButton();
},
methods:{
//获取checked的值
test(id,value){
// let value=v_value;
console.log(id+‘被选中的值为:’+value);
let arr=this.voteitemList;
let id2=id;
arr.push (
{dp_id: id2, dl_voteitem: value }
);
arr.map(ele=>{
if(ele.dp_id == id2){
console.log(‘重复’);
ele.dl_voteitem = value;
}
return;
})

            this.voteitemList = arr
            console.log(this.voteitemList)
        },
        submitBtn()
        {
            // 过滤重复数据
            let arr = this.voteitemList;
            let allArr = [];
            for(var i=0;i<arr.length;i++){
            　　var flag = true;
            　　for(var j=0;j<allArr.length;j++){
            　　　　if(arr[i].dp_id == allArr[j].dp_id){
            　　　　　　flag = false;
            　　　　};
            　　}; 
            　　if(flag){
            　　　　allArr.push(arr[i]);
            　　};
            };
            // arr = allArr;
            let proList=this.problemlist;
            //提示未填写
            if(allArr.length<proList.length)
            {
                // console.log("butjijiao");
                this.$message.warning('还有未选择的题目，帮帮人家填完好吗(★ ω ★)');
                
            }
            else
            {
                 // 提交
                let decList=JSON.parse(sessionStorage.getItem("decList"));
                let userInfo = localStorage.getItem('userInfo');
                    userInfo = JSON.parse(userInfo);
                let property=userInfo.property;
                console.log(property)
                let Data={
                    ck:userInfo.connkey,
                    idcustomer:userInfo.idcustomer,
                    dt_issue:decList.dt_issue,//决策ID
                    // ck:"0501",
                    // dt_issue:"20180001",
                    // idcustomer:"44444",
                    dl_idhouse:property[0].idhouse,
                    dl_owners:userInfo.nickname,
                    // dl_idhouse:"44444",
                    // dl_owners:"44444",
                    voteitemList:allArr,
                };
                //调用接口
                this.$server.DecisionSubmit(Data).then(res=>{
                    if(res.Code==1 && res.WsCode==1){
                        this.$alert("提交成功", "", {
                        confirmButtonText: "确定",
                        callback: action => {
                            this.$router.push({path:'/decisionresults/decisionresults'});
                            }
                        });
                    }
                    else{
                        this.$message.warning(res.Msg);
                    }
                }).catch(
                    err => {
                        console.log(err);
                    }
                )
            }
        }
},
created: function() {
    //获取跳转页面的值
    let decList=JSON.parse(sessionStorage.getItem("decList"));
    console.log(decList);

    let userInfo = localStorage.getItem('userInfo');
    userInfo = JSON.parse(userInfo);
    let Data={
        ck:userInfo.connkey,
        // ck:"0501",
        // dt_issue:"20180001",
        dt_issue:decList.dt_issue,
    };

    this.$server.DecisionInfo(Data)
    .then(res=>{
        if(res.Code==1 && res.WsCode==1){
            let arr = res.Data;
            this.decisionList=arr;
            this.problemlist=arr.problemlist;
            console.log(arr.problemlist);
        }
    }).catch(
        err => {
            console.log(err);
         }
    )
},

}

@import ‘~@/assets/css/varibles.styl’;
.con{
height:100%;
background:#ebebeb;
}
.decisionDescripe{
background :#ffffff;
padding-bottom :1rem;
}

.decisionTitle{
width: 92%;
margin-left:4%;

}
.decisionTitle p{
font-size: 2rem;
font-weight: 600;
// text-align: center;
line-height :5rem;
}
.decisionTitle .titleBottom{
display: flex;
width: 100%;
font-size: 1.2rem;
// margin-left :3%;
color:#505050;
}
.decisionTitle .titleName{
// flex: 5;
// text-align: left;
}
.decisionTitle .titleTime{
flex:5;
text-align: left;
}
.decisionCon{
width: 92%;
margin-top:1rem;
margin-left:4%;
line-height: 2.4rem;
}
.decisionCon p{
font-size: 1.6rem;
}

.decCon{
margin-top :0.5rem;
height :auto;
background :#ffffff;
padding-top :0.5rem;
}
.decCon .decList{
width :92%;
margin-left:4%;
// height :7rem;
margin-top :0.5rem;
// border-bottom : 1px solid #b2b2b2;
clear :both;
}
.decCon .decList .decP p{
font-size :1.6rem;
line-height :3rem;

}
.decCon .decList .radioSet{
height :4rem;
}
.decCon .radioList{
width :33%;
height :4rem;
// display :flex;
float: left;
}
.decCon .radioList .radioSpan{
width :100%;
// height :3.5rem;
text-align :center;
// float :left;
// flex :3;
}
.decCon .radioList .radioSpan .btnspan{
width :6rem;
margin-left:10%;
font-size :1.4rem;
height :3rem;
margin-top:0.5rem;

}

.decCon .radioList .radioSpan .btnspan .spanLabel{
margin-left :0.7rem;
}

input[type=radio] {
display: inline-block;
vertical-align: middle;
/* 当成为行内块元素时它就可以垂直居中了 /
width: 1.5rem;
height: 1.5rem;
-webkit-appearance: none;
/ 清除原有的样式 /
background-color: transparent;
border: 0 !important;
outline: 0 !important;
/ 去掉点击后外面可能会出现的蓝框 */
line-height: 20px;
color: #d8d8d8;
}
input[type=radio]:after {
content: “”;
display:block;
width: 2rem;
height: 2rem;
border-radius: 10%;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 3px solid #ddd;
background-color: #fff;
box-sizing:border-box;
}
input[type=radio]:checked:after {
content: “√”;
// transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
// -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
border-color: #A3AF25;
background-color: #A3AF25;
}
.submitBtn{
width:92%;
height: 3.5rem;
background:#A3AF25;
border:none;
color: #fff;
font-size:1.6rem;
border-radius :1rem;
margin-left:4%;
margin-top:1rem;
margin-bottom :1rem;
text-align :center;
line-height :3.5rem;
font-size:1.6rem;
font-weight :bold;
}