uniapp问卷调查(单选)

前言

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

使用组件库

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

代码

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

效果图

结束语

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

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