多组radio-group的实现

1.实现两组互斥的radio-group框
2.radio-group框中的radio按钮需要循环得到
html部分如下所示:

<a-form-model-item label="区位号">
	<a-input placeholder="区号"  v-model="oldAreaValue" />
</a-form-model-item>
<!-----第一个radio-group框--->
<a-radio-group v-model="oldAreaValue" style="border:none" button-style="solid">
	<a-radio-button :value="item.value" style="margin:5px;border-radius:3px" v-for="(item, index) in oldRadio" :key="index">
	  {{ item.value }}
	</a-radio-button>	
</a-radio-group>
<a-form-model-item label="区位号">
 <a-input placeholder="区号"  v-model="newAreaValue" />
</a-form-model-item>
<!-----第二个radio-group框--->
<a-radio-group v-model="newAreaValue" button-style="solid">
	<a-radio-button :value="item.value" style="margin:5px;border-radius:3px" v-for="(item, index) in newRadio" :key="index" >
	{{ item.value }}
	</a-radio-button>
</a-radio-group>

js部分如下所示:

<script>
	export default {
		data() {
   			return {
   				// 默认radio选中的值
				oldAreaValue: '7a',
				oldRadio: [
				  {
				    value: '7a'
				  },
				  {
				    value: '7b'
				  },
				  {
				    value: '7c'
				  },
				  {
				    value: '7d'
				  },
				  {
				    value: '7e'
				  }
				],
				newAreaValue: '',
				newRadio: [
				  {
				    value: '8a'
				  },
				  {
				    value: '8b'
				  },
				  {
				    value: '8c'
				  },
				  {
				    value: '8d'
				  }
				],
   			}
   		}
	}
</script>

最终效果如图所示：