vue 实现一个简单的问卷

Question

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

相关代码

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

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

Answer 1

简单来说，就是：

你代码中的: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值，如何获取选中的数据并提交？，问题里有代码，你可以看下代码中选中问卷题目答案并保存的思路。

Answer 2

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

Answer 3

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