question 8

index.html

@@ -11,7 +11,7 @@
         <h1>TP-noté</h1>
         <nav-bar @add-team="addTeam"></nav-bar>
 
-        <team-card v-for="team in teams"
+        <team-card @edit-team="editTeam" v-for="team in teams"
                    :id="team.id"
                    :nom="team.name"
                    :description="team.description">
@@ -30,13 +30,29 @@
             created(){},
             data(){
                 return{
-                    teams: []
+                    teams: [],
+                    edit:false,
+                    newTeam:null
                 }
             },
             methods:{
                 addTeam: function(equipe){
-                    console.log(equipe);
-                    this.teams.push(equipe);
+                    if(!this.edit){//adding a team
+                        this.teams.push(equipe);
+                    }
+                    else{//editing a team
+                        this.teams.forEach((e,idx) => {
+                            if(e.id==this.newTeam.id&&e.name==this.newTeam.name&&e.description==this.newTeam.description){
+                                this.teams[idx]=equipe;
+                            }
+                        });
+                        this.edit=false;
+                        this.newTeam=null;
+                    }
+                },
+                editTeam: function (team) {
+                    this.newTeam=team;
+                    this.edit=!this.edit;
                 }
             }
         });

src/view/team-card.js

@@ -1,19 +1,20 @@
 export default{
+    emits: ['editTeam'],
     props: {
         id: Number,
         nom: String,
         description: String
     },
     methods: {
-        myfun: function() {
-            console.log('to do')
+        edit: function() {
+            this.$emit("editTeam", new Team(this.id,this.nom,this.description))
         }
 	},
     template: `
         <br>
         <div id="teamCard">
             <span>{{id}}    {{nom}}    description: {{description}}</span>
-            <span @click="myfun" style="cursor: pointer"> - éditer</span>
+            <span @click="edit" style="cursor: pointer"> - éditer</span>
         </div>
     `
 }