WORKSHOP-VueJS. To do list.

Installer le projet

Cloner le repo en localhost (Wamp/Xamp/Lamp) 👉 git clone https://github.com/FlorenceJacobs/WKSHP-VueJS_to_do_list.git
Se rendre dans le dossier du projet :point_right: cd WKSHP-VueJS_to_do_list.git
Lancer le projet dans votre IDE :point_right: code .
Installer le projet :point_right: npm install
Puisque Bootstrap est dans le package.json, il s’installe automatiquement au moment du "npm install"
👉 npm run serve
Vous obtenez un message comme celui-ci :

App running at:

Local: http://localhost:8080/

Vous pouvez vous rendre sur votre localhost. Vous obtenez une page blanche, c’est normal.

Exercice en sous-groupes

Groupe 1 : Yvan, Abderrahman, Julien
Groupe 2 : Yannick, Antoine, Manon
Groupe 3 : Olivia, Nathanaël, Pauline
Groupe 4 : Gaetano, Valentin, Frédéric
Groupe 5 : Dorian, Thomas, Jonathan, Philippe

En sous-groupes, vous allez réaliser une to-do liste en suivant ces indications :

1. Créer l'input dans le composant parent `App.vue`

Dans App.vue, vous aller créer un titre, un sous-titre, et l’input pour introduire un nouvel item à la liste
Vous créez ces éléments à l’aide de boostrap sous les “tags” <headerList> qui appellent le composant enfant:

container
- row
- col
  - h1
  - h2
  - form class="form-group
    - label for="list"
    - input type="text" class="form-control" id="list" placeholder="Type something to do"
    - button class="btn”

Feel free de customiser avec les classes bootstrap.
C’est beau ? On continue :

2. Récupérer le contenu de l'input

Au “click” sur le button, le contenu de l’input s’ajoute à une array .

1️⃣ Capter le contenu inséré dans l’input
A/ Capter le contenu de l'input. Indice : v-model = "element"
B/ Déclarer la variable utilisée dans v-model ("element" dans l'exemple) dans data

data() {
    return {
        listElement : [],
        element : "",
     }
},

2️⃣ Appeler une méthode au click sur le bouton
A/ Appeler la méthode dans le bouton. Indice : v-on:click(ou @click).prevent = “doThat”
REM : le .prevent empêche la page de se recharger au click
B/ Déclarer cette méthode de votre choix dans <script> :

methods: {
    doThat: function() {
    ...........;
    }
}

3️⃣ Vérifier que ça fonctionne
Insérez l’array listElement dans le <template> sous la forme {{ listElement }}.
Essayer d’ajouter des éléments à votre To do list. Ça marche? Alors on efface le {{ listElement }} et on passe à la suite.

3. Afficher la liste dans un nouveau composant

À présent, il faudrait que les éléments de votre array {{ listElement }} s’affichent dans un nouveau composant enfant:

1️⃣ Créer le composant enfant List.vue et lui donner un nom d’exportation dans export default
2️⃣ Importer le composant enfant dans le composant parent et lui donner le nom que l’on souhaite utiliser comme tag dans

components: {
     'headerList' : HeaderList,
      .... : ....,
},

3️⃣ Faire passer des données du composant parent au composant enfant. Dans notre cas, la donnée à faire passer est l’array listElement. Pour cela, utiliser les “props”:
- a. Dans le composant parent, ajouter au tag qui appelle le composant enfant v-bind:listElement="listElement".
- b. Dans le composant enfant, utiliser props: ['listElement'].
4️⃣ Faire apparaître chaque élément de l'array listElement dans une <li> grâce à la boucle v-for (attention, pour que ça fonctionne, il faut coupler avec v-bind:key="index").
5️⃣ Ajouter un bouton pour supprimer un élément de la liste :
- a. Dans la boucle, ajouter un <button> et y appeler une méthode au clic. Indice : v-on:click(ou @click)="doThat(onThis)"
- b. Déclarer cette méthode qui permet de supprimer l’élément[x] de l’array listElement au click :

methods: {
    doThat: function(onThis) {
    .........;
    }
}

6️⃣ Enfin, le composant enfant qui contient les éléments de la liste s’affiche par défaut, même lorsqu'il est vide. Il faudrait ajouter une condition au tag qui appelle le composant enfant uniquement s’il contient au moins un élément dans la liste. Si la liste est vide, le composant enfant ne s’affiche pas.

v-if=........

Et voilà, s’il vous reste du temps, vous pouvez mettre en forme !