用v-for呈现多个单选题,但发现竟然变成了多选,不知如何解决


<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>


现在变成了如下状况:

img


请问该如何解决?请赐教,不胜感激。

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>

img