Question 3

index.html

@@ -13,6 +13,7 @@
     </div>
 
     <script src="src/service/link-service.js"></script>
+    <script src="src/class/team.js"></script>
     <script src="src/misc/const.js"></script>
     <script src="main.js"></script>
 
@@ -26,9 +27,7 @@
             data(){
                 return{}
             },
-            methods:{
-                myFun:function(){}
-            }
+            methods:{}
         });
         app.component('NavBar', NavBar);
         app.mount('#app');

src/class/team.js

@@ -0,0 +1,6 @@
+class Team{
+    constructor(id, name){
+        this.id=id;
+        this.name=name;
+    }
+}

src/view/nav-bar.js

@@ -3,20 +3,44 @@ export default{
 		return {
 			Home: '',
 			Teams: '',
-			Results: ''
+			Results: '',
+			id:'',
+			name:'',
+			clicked: false
 		}
 	},
 	methods: {
 		myfun: function() {
-			return true;
+			console.log("gngn");
+			this.clicked=!this.clicked;
+		},
+		addTeam: function() {
+			let team = new Team(this.id, this.name);
+			console.log(team);
+			this.id='';
+			this.name='';
 		}
 	},
 	template: 
 		`
 			<div>
 				<span>Home</span>
-				<span>Teams</span>
+				<span @click="myfun" style="cursor: pointer">Teams</span>
 				<span>Results</span>
 			</div>
+			<form @submit.prevent v-if="clicked">
+
+			<div>
+				<label>id</label><br/>
+				<input type="number" v-model="id"/>
+			</div>
+			
+			<div>
+				<label>Name</label><br/>
+				<input type="text" v-model="name"/>
+			</div>
+
+			<input type="submit" value="Submit" @click="addTeam"/>
+			</form>
 		`
 }