将多问卷（单选）选择结果记录在数组中(Vue)，并设置选项的选中样式

原创已于 2025-02-07 12:49:52 修改 · 651 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2019-12-23 16:40:06 首次发布

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中，利用HTML和JavaScript代码记录多问卷的单选选择结果，并动态设置选项的选中样式。通过示例代码展示了具体的实现过程。

将多问卷（单选）选择结果记录在数组中(Vue)，并设置选项的选中样式

html代码：

<div class="question" 
            v-for="(item, index) in questionArr" 		//遍历存放问题的数组
            :key="index"							//设置key属性
     >							
            <p>{{item['title']}}</p>				//问题内容

            <p 
                v-for="(obj, ind) in item['options']" 		//遍历选项
                :key="ind" 								//key属性
                @click='doQuestion(index,ind)' //给整个p标签绑定点击事件,传递当前问题和选项的索引,切换选项
                :class="{active:(answerArr[index]==ind)}"// 激活样式,由数组内的第(当前问题的索引值)个的值和自身选项的索引值是否相等确定
               >	

                <img :src="answerArr[index]==ind?'对勾.png':'未选.png'" alt="" >
                									//自定义单选框,根据选择状态切换图片内容src 

                <input type="radio" 				//通常设置隐藏display:none
                    :name="index" 					//单选radio的name需设置一样的(题目的索引)
                    :value="ind" 					//value值设置为选项的索引,会存在数组中
                    v-model="answerArr[index]"> 	//将单选框双向绑定到数组的第(问题索引)个项的值上
                {{obj}}				//选项的内容
            </p>
        </div>

js代码：

new Vue({
            el: '#app',
            data() {
                return {
                    answerArr: [],
                    questionArr: [{ 						//问卷数组
                        "title": "对很大声音没有反应",
                        "options": ["123456！", "asdaaaad"]
                    }, {
                        "title": "逗引时不发音或不会微笑",
                        "options": ["zsdaasda", "5555555", "mmmmmmmmmm", '9999']
                    }, {
                        "title": "不注视人脸，不追视移动人或物品",
                        "options": ["123456！", "asdaaaad"]
                    }, {
                        "title": "俯卧时不会抬头",
                        "options": ["zsdaasda", "5555555", "mmmmmmmmmm"]
                    }]
                }
            },
            methods: {
                doQuestion(index, ind) {
                    this.answerArr.splice(index, 1, ind);//替换 将数组的第index个项的值替换为ind
                    setTimeout(() => {					//打印数组 ,非必要
                        console.log(this.answerArr[index]);
                        console.log(this.answerArr);
                    }, 0)
                }
            },
            mounted() {//在页面挂载时,给数组初始化,设置选择都是第一个选项
                this.questionArr.map(obj => {
                    this.answerArr.push(0);
                })
                console.log(this.answerArr);
            },
        })