<template>
<view class="questionnaire">
<view class="section">
<view class="title">
一、财务状况
</view>
<view class="block" v-for="(item,index) in questionList" :key="index">
<view class="question">
{{item.question}}
</view>
<view class="selection" v-for="(answer,index1) in item.answer" :key="index1">
<van-radio-group value="radio" @change="onChange(answer.mask)">
<van-radio custom-class="radio" checked-color="rgb(213,0,15)">{{answer.content}}</van-radio>
</van-radio-group>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
questionList:[
{
qId:1,
question:'1.您的年龄是?',
answer:[
{content:"18-30岁",mask:'-2'},
{content:"31-50岁",mask:'0'},
{content:"51-60岁",mask:'-4'},
{content:"高于60岁",mask:'-10'}
],
},
],
totalMask:0,
radio:''
}
},
methods:{
// onChange(e){
// console.log('e:',e)
// }
onChange(mask) {
console.log('mask:',mask)
this.totalMask+=Number(mask),
console.log('this.totalMask:',this.totalMask)
console.log('this.totalMask+1:',this.totalMask+1)
},
}
}
</script>
<style>
.questionnaire{
margin: 5px auto;
width: 90%;
}
.title{
margin: 5px 0px;
}
.block{
margin: 5px;
}
.question{
margin:5px 0px;
}
.radio{
margin:5px 0px;
}
</style>
现在变成了如下状况:
v-for的位置写错了,有用希望采纳一下哈
<view class="selection" >
<van-radio-group value="radio" @change="onChange(answer.mask)">
<van-radio v-for="(answer,index1) in item.answer" :key="index1" custom-class="radio" checked-color="rgb(213,0,15)">{{answer.content}}</van-radio>
</van-radio-group>
</view>
我的想法:onChange直接让totalMask变成对应索引的值就行
我按照你的代码运行了一下,是单选,我只是把view换位div或者p标签,组件使用的是element的,但是框架都是一样的;
不知道是不是van组件里也要使用v-model
<template>
<div class="questionnaire">
<div class="section">
<h3 class="title">
一、财务状况
</h3>
<div class="block" v-for="(item,index) in questionList" :key="index">
<p class="question">
{{item.question}}
</p>
<p class="selection" v-for="(answer, index1) in item.answer" :key="index1">
<el-radio-group v-model="radio" @change="onChange(answer.mask)">
<el-radio :label="answer.content" :value="answer.mask">{{answer.content}}</el-radio>
</el-radio-group>
</p>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'Answer',
data(){
return{
questionList:[
{
qId:1,
question:'1.您的年龄是?',
answer:[
{content:"18-30岁",mask:'-2'},
{content:"31-50岁",mask:'0'},
{content:"51-60岁",mask:'-4'},
{content:"高于60岁",mask:'-10'}
],
},
],
totalMask:0,
radio:''
}
},
methods:{
// onChange(e){
// console.log('e:',e)
// }
onChange(mask) {
console.log('mask:',mask)
this.totalMask+=Number(mask),
console.log('this.totalMask:',this.totalMask)
console.log('this.totalMask+1:',this.totalMask+1)
},
}
}
</script>
<style>
.questionnaire{
margin: 5px auto;
width: 90%;
}
.title{
margin: 5px 0px;
}
.block{
margin: 5px;
}
.question{
margin:5px 0px;
}
.radio{
margin:5px 0px;
}
</style>