<template>
<div class="line-list line-list--indent">
	<div class="line-item">
	<radiogroup :options="radioList1"  @changed="onChanged"></radiogroup>
	</div>
	<div class="line-item">
	<radiogroup :options="radioList2" class="vue-radio-group horizontal" @changed="onChanged"></radiogroup>
	</div>
	<div class="line-item">
		checked:{{checkedValue|json}}
	</div>
</div>

</template>

<script>
import radiogroup from "components/radio/radiogroup"

export default{
	data(){
		return{
	 		checkedValue:"",
	 		radioList1:[
	 			{
	 				value:"1",
	 				name:"city1",
	 				text:"上海"
	 			},
	 			{
	 				value:"2",
	 				name:"city1",
	 				text:"北京"
	 			},
	 			{
	 				value:"3",
	 				name:"city1",
	 				disabled:"disabled",
	 				text:"深圳"
	 			}
	 		],
	 		radioList2:[
	 			{
	 				value:"11",
	 				name:"city2",
	 				text:"上海"
	 			},
	 			{
	 				value:"22",
	 				name:"city2",
	 				checked:"checked",
	 				text:"北京"
	 			},
	 			{
	 				value:"33",
	 				name:"city2",
	 				disabled:"disabled",
	 				text:"深圳"
	 			}
	 		]
	 	}
 	},
 	components:{
 		radiogroup
 	},
 	methods:{
 		onChanged:function(item){
			this.checkedValue=item;
 		}
 	}
}
</script>