Discussion :

[itokia]

Bonjour,

Je possède une page dans le quel j'affiche une liste d'utilisateur dans un tableau, pour chacune des lignes j'ai un bouton qui me permet d'editer l'agent en question.
Pour cela, j'importe un formulaire a partir d'un composant avec les valeurs préremplie que je passe avec une props. Mais lorsque je ferme le formulaire et que je le réouvre avec un autre utilisateur, les informations sont identique à la première réouverture.

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
 
export default defineComponent({
  name: 'EditAgentEmbauche',
  props: {
    utilisateur: {}
  },
  setup(props) {
    const utilisateur= ref(props.utilisateur)
    const utilisateurForm = ref({
      nom: agentSelect.value.nom,
      prenom: agentSelect.value.prenom,
      mail: '',
      codeOrga: '',
      libelleEmploi: '',
      typeContrat: '',
      dateEntreeOrga: '',
      dateLimiteReponse: ''
    })
  return {
     utilisateurForm
  }

Et mon formulaire:

Code :

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

1
2
3
4
5
 
<q-input class="col-12" v-model="utilisateurForm.nom" label="Nom *" stack-label
                     :rules="[val => !!val || 'Le champ nom est obligatoire']"
            />
...

Savez pourquoi mes informations ne se mettent pas a jours lorsque je sélectionne un autre utilisateur?

[gwyohm]

salut,
Tout d'abord, je ne comprends pas

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
 
props: {
    utilisateur: {}
  },
  setup(props) {
    const utilisateur= ref(props.utilisateur)
    const utilisateurForm = ref({
      nom: agentSelect.value.nom, // d'ou vien agentSelect ?
      prenom: agentSelect.value.prenom,
      mail: '',
      codeOrga: '',
      libelleEmploi: '',
      typeContrat: '',
      dateEntreeOrga: '',
      dateLimiteReponse: ''
    })

Ensuite, si utilisateur est passé en props, et si ton composant est juste caché (pas démonté puis remonté), tu devrais plutot faire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// const utilisateur= ref(props.utilisateur);
const utilisateur= toRef(props, 'utilisateur');
// et (j'imagine que agentSelect est une erreur de copier / coller
const utilisateurForm = computed(() => ({
      nom: utilisateur.value.nom,
      prenom: utilisateur.value.prenom,
      mail: '',
      codeOrga: '',
      libelleEmploi: '',
      typeContrat: '',
      dateEntreeOrga: '',
      dateLimiteReponse: ''
    }))

Pour l'instant, utilisateur est initialisé avec la props, mais n'est jamais mis à jour via les props. En passant par toRef, tu quand la props change, la valeur associée va changer aussi.
Cependant, il faut que l'objet utilisateur passé soit un autre objet (pas une mise à jour des propriétés de l'objet)

Un autre quick-fix est de positionner une key sur ton composant qui change en fonction de l'utilisateur sélectionné. En faisant ca, tu forces vue à recréer une instance du composant:

Code :

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

<edit-agent-embauche :utilisateur="utilisateur" :key="utilisateur.id"

il faut choisir pour key une propriété unique dans tes users

[itokia]

Un grand merci @gwyohm, cela fonctionne parfaitement avec toRef et key sur le composant

oui agentSelect est une erreur de copier / coller
Par contre j'ai une question, j'ai du mal a saisir la difference entre toRef et Ref, j'ai lu que ca tranformer une référence en un objet classique.
J'ai donc essayer de simplifier mon code en mettant juste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
const utilisateurForm = toRef(props, 'utilisateur');
 
/*const utilisateurForm = computed(() => ({
      nom: utilisateur.value.nom,
      prenom: utilisateur.value.prenom,
      mail: '',
      codeOrga: '',
      libelleEmploi: '',
      typeContrat: '',
      dateEntreeOrga: '',
      dateLimiteReponse: ''
    }))*/

et v-model="utilisateurForm .nom"


Hors lorsque je modifie ma valeur dans mon champ input, la valeur qui se trouve dans mon tableau est modifié en tant réel. utilisateurForm garde tout de même la réactivité de utilisateur?

Je viens de m'appercevoir que dans ma page parent, utilisateur je l'avais déclarer comme référence et non reactive. Comme j'ai pu lire dans la doc, étant un objet je l'ai passé en reactive :

Code :

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

1
2
3
4
5
6
7
 
const utilisateur = reactive({}) //Initialisation a vide
//Fonction qui me permet d'afficher mon composant lorsque je clique sur mon bouton éditer
const editAgent = function (agent){
      utilisateur = agent
      cardEdit.value = true
    }

Mais dans mon composant, je ne récupère plus mes informations. Ce n'est pas ainsi que je dois procéder?

[gwyohm]

Si ces 2 lignes sont bien dans le même fichier, tu dois avoir une erreur car utilisateur est en const, donc dans ta fonction, tu ne dois pas pouvoir le mettre à jour.

Code :

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

1
2
3
4
5
6
7
 
const utilisateur = reactive({}) //Initialisation a vide
//Fonction qui me permet d'afficher mon composant lorsque je clique sur mon bouton éditer
const editAgent = function (agent){
      utilisateur = agent
      cardEdit.value = true
    }

même si tu le changes en let, ca n'ira pas car en le modifiant, tu vas perdre l'objet reactif.

La bonne façon de faire, c'est de recopier l'objet tout en gardant le meme:

Code :

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

1
2
3
4
5
6
7
8
 
const utilisateur = reactive({}) //Initialisation a vide
//Fonction qui me permet d'afficher mon composant lorsque je clique sur mon bouton éditer
const editAgent = function (agent){
      Object.keys(utilisateur).forEach((key) => {delete utilisateur[key]}); // on supprime toutes les clés
      Object.entries(agent).forEach(([key, val]) => {utilisateur[key] = val}); // on recopie celle de agent
      cardEdit.value = true
    }

[itokia]

C'est parfait, je te remercie pour toutes tes explications et de ton aide