uview中根据后台数据绑定radio单选框

今天需要做一个单选框，然后单选框上的显示文本需要是后台传输过来的，由于之前只是后端，前端写的很少，而且经过了解后发现uview时uniapp的一个UI，也就是移动端的组件，是我从来没接触过的组件，所以上手组件就花了一个上午，不过好在下午就做出来了这个功能

首先：先从官网上找到组件模板：https://v1.uviewui.com/components/radio.html

<template>
	<view class="">
		<u-radio-group v-model="value" @change="radioGroupChange">
			<u-radio 
				@change="radioChange" 
				v-for="(item, index) in list" :key="index" 
				:name="item.name"
				:disabled="item.disabled"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: 'apple',
					disabled: false
				},
				{
					name: 'banner',
					disabled: false
				},
				{
					name: 'orange',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: 'orange',
		};
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>

根据需要的进行删改；

然后组件修改成：

				<view class="item-content" >
						<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in activityTypeList" 
								:key="index" 
								:name="item.dictLabel"
								:disabled="item.disabled">
								{{item.dictLabel}}
							</u-radio>
						</u-radio-group>
					</view>

:name中的item.后面的名字一定要改成实体类中的名字，否则就会拿不到数据！！(ps.其实主要是因为这个忘记改了才浪费许多时间)

然后就是在methods里面新建方法:

getDictLabel(){
				this.$u.get('/system/dict/data/type/sys_activity_type', {
					dictType:'sys_activity_type'
					// id:11
				}).then(res => {
					console.log("数据拿到了：",res);
					for (var i = 0; i < res.data.length; i++) {
						this.activityTypeList[i] = res.data[i];
					}
				});

我这个数组中拿到的是两个实体类，后台代码就不展示了

然后就实现了:

 而且还可以替换：

此处替换成dictType后页面也就跟着变了：