Passage de propriété a un composant formulaire

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:

---

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:

---

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?

salut,
Tout d'abord, je ne comprends pas

Code:

---

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:

---

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:

---

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

---

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

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:

---

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:

---

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?

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:

---

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:

---

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 }

---

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