uniapp问卷调查(单选)-编程知识

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>