uniapp问卷调查(单选)

前言

该代码片段只支持问卷调查的单选功能

使用组件库

配置 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

代码

javascript 复制代码
<template>  
  <view>  
    <view v-for="(item, index) in radiolist1" :key="index">  
      <view>{{ item.title }}</view>  
      <u-radio-group v-model="selectedValues[index]" placement="column">  
        <u-radio  
          v-for="(aitem, aindex) in item.option"  
          :key="aindex"  
          :label="aitem.value"  
          :name="aitem.name"  
        ></u-radio>  
      </u-radio-group>  
    </view>  
    <view>  
      <button @click="onSumbit">点击获取到这个值</button>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      radiolist1: [  
        {  
		  id:1,
          title: '这是第一题',  
          option: [  
            { name: '选项一', value: '选项一' },  
            { name: '选项二', value: '选项二' },  
            { name: '选项三', value: '选项三' },  
          ],  
        },  
        {  
		  id:2,
          title: '这是第二题',  
          option: [  
            { name: '选项一', value: '选项一' },  
            { name: '选项二', value: '选项二' },  
            { name: '选项三', value: '选项三' },  
          ],  
        },  
      ],  
      selectedValues: [], // 初始化一个空数组来存储每个radio-group的选中状态  
    };  
  },  
  created() {  
    // 在组件创建时,初始化selectedValues数组的长度与radiolist1相同,并将每个元素设置为空字符串  
    this.selectedValues = this.radiolist1.map(() => '');  
  },  
  methods: {  
    onSumbit() {  
      console.log(this.selectedValues, 'this.selectedValues'); // 输出每个radio-group的选中状态  
    },  
  },  
};  
</script>

效果图

结束语

如果需要多选和填空,可以根据,类型判断是填空还是多选,选择不同的组件来渲染即可!

有什么不足的地方,请大家多多指教!点个赞啦!

相关推荐
我的写法有点潮几秒前
竟然被element-plus背刺了
前端·javascript·vue.js
南村群童欺我老无力1 分钟前
100-app-challenge 第二期 GestureGo手势识别
前端·浏览器
unknown不想说话474552 分钟前
什么是Module Federation2
前端
岁月宁静3 分钟前
AI 聊天消息长列表性能优化:后端分页 + 前端虚拟滚动
前端·vue.js·人工智能
TZOF4 分钟前
TypeScript的对象如何进行类型声明
前端·后端·typescript
一只叁木Meow5 分钟前
DOM元素尺寸属性详解:offset、client、scroll
前端
原则猫5 分钟前
单例模式工程运用
前端·设计模式
degree5205 分钟前
使用 Web Vitals 量化网页性能:从 LCP、FID 到 CLS 实战优化
前端
水晶浮游6 分钟前
💥 半夜3点被拉群骂?学会Sentry监控后,现在都是后端背锅了
前端
Olrookie6 分钟前
若依前后端分离版学习笔记(十九)——导入,导出实现流程及图片,文件组件
前端·vue.js·笔记