<h1>Vue Radio Buttons Experiment</h1>

<div id="app">
		<table style="float:left; border:1px black solid; width:45%;margin-left:10px;margin-right:10px;">
		<tr>
			<td><input type="radio" name="selected" value="1" v-model="select1"></td>
			<td><input v-model="fname1" placeholder="First Name"></td>
			<td><input v-model="lname1" placeholder="Last Name"></td>
		</tr>
		<tr>
			<td><input type="radio" name="selected" value="1" v-model="select2"></td>
			<td><input v-model="fname2" placeholder="First Name"></td>
			<td><input v-model="lname2" placeholder="Last Name"></td>
		</tr>
		<tr>
			<td><input type="radio" name="selected" value="1" v-model="select3"></td>
			<td><input v-model="fname3" placeholder="First Name"></td>
			<td><input v-model="lname3" placeholder="Last Name"></td>
		</tr>
		<tr>
			<td><input type="radio" name="selected" value="1" v-model="select4"></td>
			<td><input v-model="fname4" placeholder="First Name"></td>
			<td><input v-model="lname4" placeholder="Last Name"></td>
		</tr>
	</table>
	
	<table style="float:left; border:1px black solid; width:45%;margin-left:10px;margin-right:10px;">
		<tr>
			<td>{{this.select1}}</td>
			<td>{{this.fname1}}</td>
			<td>{{this.lname1}}</td>
		</tr>
		<tr>
			<td>{{this.select2}}</td>
			<td>{{this.fname2}}</td>
			<td>{{this.lname2}}</td>
		</tr>
		<tr>
			<td>{{this.select3}}</td>
			<td>{{this.fname3}}</td>
			<td>{{this.lname3}}</td>
		</tr>
		<tr>
			<td>{{this.select4}}</td>
			<td>{{this.fname4}}</td>
			<td>{{this.lname4}}</td>
		</tr>
	</table>
</div>

var app = new Vue({
	el: '#app',
	data: {
		select1:0,
		fname1:'Jim',
		lname1:'Smith',
		select2:1,
		fname2:'Alice',
		lname2:'Jones',
		select3:0,
		fname3:'Pete',
		lname3:'Yang',
		select4:0,
		fname4:'Joan',
		lname4:'Jefferson',
	}
})