Discussion :

[Vuillemin]

Bonjour,

En train d'apprendre VueJs3 en composition API, je compose une interface pour la création et le suivie de programmes sportifs. Je suis face à un problème que je ne parvient pas à expliquer.

J'ai un bouton, qui permet au click, d'ajouter une occurrence de semaine dans une liste qui contient toutes les semaines du programme. Cette liste est affiché sous format d'un composant appelé Week avec un v-for.
Chaque Week dispose d'un input permettant de nommer la semaine, ainsi que d'un bouton en forme de croix permettant de supprimer la semaine.

Mes Week dispose dans leurs props, d'un uuid me permettant de bien les identifier.

Voici donc mon problème :

Lorsque j'ajoute 2 semaine, je les nomme respectivement A, et ensuite B. Lorsque je supprime la semaine A (que l'on peut bien identifié via son UUID) on voit que le composant est bien supprimer de ma liste et donc de l'affichage. Il reste donc la semaine B, mais son input contient la valeur A (valeur du composant précédemment supprimer). Je ne comprend absolument pas d'où vient le problème.

Je joins donc ci-contre les capture d'écran explicitant mon soucis, ainsi que le code des 2 Composants

La semaine A


Ajout de la semaine B


Suppression de la semaine A


ProgramCreation.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<script setup>
import { ref } from 'vue';
 
import { v4 as uuidv4 } from 'uuid';
 
import Week from '@/components/Program/Week/Week.vue';
 
let weeks = ref([]); 
 
function addWeek(){
    weeks.value.push({uid : uuidv4(), name : null});
}
 
function removeWeek(week_uid){
    const idxObj = weeks.value.findIndex(week => {
        return week.uid === week_uid;
    });
 
    weeks.value.splice(idxObj, 1);
}
</script>
 
<template>
    <div class="program-creation">
        <h1 class="green">Create a new program</h1>
        <label for="program_name">Name : </label>
        <input type="text" name="program_name" id="program_name" placeholder="Programe Name ..."/>
 
        <label for="program_description">Description : </label>
        <input type="text" name="program_description" id="program_description" placeholder="What is the goal of your program ..."/>
 
        <div v-for="(w, i) in weeks">
            <h3>Week n°{{ i+1 }}</h3>
            <Week :uid=w.uid @week-remove="removeWeek"/>
        </div>
        <button @click="addWeek">Add week</button>
    </div>
</template>
 
<style scoped>
button{
    margin-top: 1em;
    padding: 2em;
    background-color: var(--color-text);
    border: none;
    border-radius: 0.5em;
    transition-duration: 0.3s;
}
 
button:hover{
    background-color: var(--vt-c-green);
}
 
input{
    margin-bottom: 1em;
}
</style>

Week.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<script setup>
import { ref } from 'vue';
 
const props = defineProps({
    uid: {
        type: String,
        required: true
    }
});
 
const emits = defineEmits(['week-remove']);
 
let week_name = ref(props.name);
 
</script>
 
<template>
    <div>
        <table>
            <caption>
                <div class="flexbox">
                    <input type="text" placeholder="Week name ..." v-model="week_name"/>
                    <span class="italic lower uid">({{ uid }})</span>
                    <a @click="$emit('week-remove', uid)" class="close"></a>
                </div>
            </caption>
            <tr>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
                <th>Saturday</th>
                <th>Sunday</th>
            </tr>
            <tr>
                <td>Pec</td>
                <td>Back</td>
                <td>Arm</td>
                <td>Legs</td>
                <td>Rest</td>
                <td>FB</td>
                <td>Rest</td>
            </tr>
        </table>
    </div>
</template>
 
<style scoped>
.flexbox{
    justify-content: space-between;
}
 
.flexbox *{
    margin-bottom: 0.5em;
}
 
input{
    width: 20em;
    height: 2em;
}
 
table{
    width: 100%;
    padding: 1em;
    border-radius: 0.5em;
    background-color: var(--color-background-soft);
    margin-bottom: 0.5em;
}
 
th {
    color: var(--vt-c-green);
}
 
td, th {
    text-align: center;
    width: 10em;
}
</style>

Si quelqu'un a une idée du problème, je suis preneur.

Je vous remercie et vous souhaite une excellente journée.

[gwyohm]

hello, as-tu essayé d'ajouter une key à ton v-for ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.
<div
  v-for="(w,i) in weeks"  
  :key="w.uid"
>

[Vuillemin]

Hello gwyohm,

Je te remercie de ta réponde. En ajoutant l'attribut :key dans ma v-for, à la suppresion, toute ma liste est completement recharger et donc les input se vident. J'ai donc fais remonté le changement du nom de semaine via un event dans la liste du parent pour ensuite l'ajouter dans le composant.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function changeName(uid, name){
    const idxObj = weeks.value.findIndex(week => {
        return week.uid === uid;
    });
    if(idxObj > -1){
        weeks.value[idxObj].name = name;
        console.log(weeks.value[idxObj]);
    }
}
 
<Week :key=w.uid :uid=w.uid :name=w.name @week-remove="removeWeek" @week-change-name="changeName"/>

Je suis enfin débloqué sur ce sujet, je vais essayer de continuer à progresser sur VueJs, merci de ton aide