<h1>Vue Radio Buttons Experiment - Part 2</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="selected"></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="2" v-model="selected"></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="3" v-model="selected"></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="4" v-model="selected"></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',
		selected:'2'
	},
	watch: {
    selected: function (val) {
			// Default Radio Buttons
			this.select1 = 0;
			this.select2 = 0;
			this.select3 = 0;
			this.select4 = 0;
			// Set it to 1 based upon selected
			if(val==1)
				this.select1 = 1;
			if(val==2)
				this.select2 = 1;
			if(val==3)
				this.select3 = 1;
			if(val==4)
				this.select4 = 1;
    }
	}
})