vue 实现一个简单的问卷

image.png
image.png

新人入坑,实现一个单选问卷,为什么选了第一题再去选第二题 第一个被选中的就取消了,求指点

相关代码

 <div class="container">
            <div class="question" v-for='(item,index) in list' :key="index">
                <p class="title">#$ index+1 +'.'$# #$ item.title $#</p>
                <div class="box" v-for='(val,id) in item.lists' @click='choose(val.id)' :class="{active : active == val.id}" >
                    {{ val.question }}
                </div>
            </div>
        </div>

数据

return{
                    list:[
                        {
                            title:'一',
                            lists:[{
                                id:1,
                                question:'答案1',
                            },
                            {
                                id:2,
                                question:'答案2',
                            },
                            {
                                id:3,
                                question:'答案3',
                            },
                            {
                                id:4,
                                question:'答案4',
                            },]
                        },
                        {
                            title:'二',
                            lists:[{
                                id:1,
                                question:'答案11',
                            },
                            {
                                id:2,
                                question:'答案22',
                            },
                            {
                                id:3,
                                question:'答案33',
                            },
                            {
                                id:4,
                                question:'答案44',
                            },]
                        },
                    ],
                    active:'',
                }
            },
            methods: {
                choose(index){
                    this.active = index
                }
                },
            },

如果选中了以后又怎样保存当前题目的答案呢

回答:

简单来说,就是:

你代码中的:class="{active : active == val.id}"这里,只是判断了所有question的选项id,表现出的是所有question只有一个active值,也就是只有一个答案选项是active状态。
你要让这个active状态跟每个问题下的选项关联。

修改如下:

<div class="container">
            <div class="question" v-for='(item,index) in list' :key="index">
                <p class="title">#$ index+1 +'.'$# #$ item.title $#</p>
                <div class="box" v-for='(val,id) in item.lists' @click='choose(index,val.id)' :class="{active : active == item.active}" >
                    {{ val.question }}
                </div>
            </div>
        </div>

data:

list:[
                        {
                            title:'一',
                            questionId: 'q1',
                            active:'',
                            lists:[{
                                id:1,
                                question:'答案1',
                            },
                            {
                                id:2,
                                question:'答案2',
                            },
                            {
                                id:3,
                                question:'答案3',
                            },
                            {
                                id:4,
                                question:'答案4',
                            },]
                        },
                        {
                            title:'二',
                            questionId: 'q2',
                            active:'',
                            lists:[{
                                id:1,
                                question:'答案11',
                            },
                            {
                                id:2,
                                question:'答案22',
                            },
                            {
                                id:3,
                                question:'答案33',
                            },
                            {
                                id:4,
                                question:'答案44',
                            },
                           ]
                        },
                    ]
methods: {
                choose(index,id){
                    this.list[index].active = id
                }
        }

以上大致思路,你还得再调试一下。

如何保存?可以存当前this.list中所有问题的questionId和对应的active(即选中的答案id)组成的数组。

我曾经问过关于问卷的问题,vue使用iViewui组件,循环绑定radio、checkbox组件的v-model值,如何获取选中的数据并提交?,问题里有代码,你可以看下代码中选中问卷题目答案并保存的思路。

回答:

你只有一个active,肯定只有一个选中
要用一个active的数组,数组里面放每一组选中的值

回答:

用数组来保存选中的结果
1.:model=”keys”
2.点击时,将选中的id,title以对象形式保存,之前如果选过,就替换,反之,则保存
选中效果,需要根据选中的keys进行渲染

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注