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>

效果图

结束语

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

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

相关推荐
Predestination王瀞潞23 分钟前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
2501_9160074724 分钟前
免费iOS加固方案指南
android·macos·ios·小程序·uni-app·cocoa·iphone
静西子2 小时前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果2 小时前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv2 小时前
10月25日
前端·javascript·vue.js
xuelong-ming2 小时前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
万邦科技Lafite4 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied6 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊7 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友7 小时前
设计模式有哪几类?
前端·后端·设计模式