dorian.hodin
/
TP_JavaScript
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Form for Team and component Navbar working, link are not bind now

Browse Source
master
dohodin 2 years ago
parent 2866d4bf0a
commit 7ea12f3c89
5 changed files with 55 additions and 5 deletions
Show Stats Download Patch File Download Diff File

10
index.html
Unescape View File

@ -11,11 +11,16 @@
<body> <body>
<div id="app"> <div id="app">
<navbar></navbar> <navbar></navbar>
<team-card></team-card>
</div> </div>
<script src="/src/misc/constant.js"></script>
<script type="module"> <script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
import NavBar from '/src/view/navbar.js'; import Navbar from '/src/view/navbar.js';
import TeamCard from '/src/view/team_add.js';
const app = createApp({ const app = createApp({
data(){ data(){
@ -24,7 +29,8 @@
} }
} }
}) })
app.component('NavBar', NavBar); app.component('Navbar', Navbar)
.component('TeamCard', TeamCard)
app.mount('#app'); app.mount('#app');
</script> </script>
</body> </body>

1
src/misc/constant.js
Unescape View File

@ -0,0 +1 @@
const ERROR_COLOR = 'red';

3
src/view/link_service.js
Unescape View File

@ -2,9 +2,10 @@ export default class LinkService{
getLinks(){ getLinks(){
return [ return [
'https://www.google.com', '',
'https://www.youtube.com', 'https://www.youtube.com',
'https://www.github.com', 'https://www.github.com',
]; ];
} }
} }

4
src/view/navbar.js
Unescape View File

@ -1,11 +1,11 @@
export default { export default {
template:` template:`
<div> <section>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Teams</a></li> <li><a href="#">Teams</a></li>
<li><a href="#">Results</a></li> <li><a href="#">Results</a></li>
</ul> </ul>
</div> </section>
` `
}; };

42
src/view/team_add.js
Unescape View File

@ -0,0 +1,42 @@
export default {
data: function() {
return {
id: '',
name: '',
errorMessage: '',
errorColor: ERROR_COLOR
}
},
methods: {
addTeam: function() {
this.errorMessage = '';
if (!this.id || !this.name) {
this.errorMessage = 'ID and Name are required !';
return;
}
const team = { id: this.id, name: this.name};
console.log('form.addTeam', team);
this.$emit('addTeam', team);
this.id = '';
this.name = '';
}
},
template: `<section>
<h2>News form</h2>
<form @submit.prevent>
<div v-bind:style="{ color: errorColor}">{{ errorMessage }}</div>
<div>
<label>ID</label><br/>
<input type="text" v-model="id"/>
</div>
<div>
<label>Name</label><br/>
<input type="text" v-model="name"/>
</div>
<input type="submit" value="Create Team" @click="addTeam"/>
</form>
</section>`
}
Write Preview
Loading…
Cancel
Save