Vue.JS3 passer un objet à un composant

Bonjour,

Je tente de passer un objet à un composant enfant mais je bloque.
Je procède de la façon suivante :

Composant parent :
Dans mon setup()

Code:

---

1 2 3 4

let agent = reactive({}) //Appel a mon api pour charger mes donnees agent = response.data

---

Dans mon template j'appel mon composant

Code:

---

<monComposant:agent="agent"/>

---

Ensuite dans mon template enfant :

Code:

---

1 2 3 4 5 6 7 8

<template> <q-card> <q-card-section> <div class="row justify-center"> <q-input class="col-5 q-mr-sm" v-model="form.nom" label="Nom" stack-label :dense="dense" readonly /> <q-input class="col-5 q-ml-sm" v-model="form.dateNai" label="Date de naissance" stack-label :dense="dense" readonly /> </div> ...

---

mon setup enfant:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import {defineComponent, toRefs, ref} from 'vue'   export default defineComponent({ name: "monComposant", props: { agent: Object }, setup (props) { const { agent } = toRefs(props) let form = ref(agent)   return { form } } })

---

Mais aucune valeur s'éffiche dans mes input. Vous avez une idée?

Je m'auto répond pour ceux a qui cela intéresse :)
Il faut utiliser les Provide et Inject de vue pour passer les propriétés.

hello,

Utiliser provide et inject est un contournement, tu introduis une dépendance entre tes 2 composants.

Je pense que ton souci venait de

Code:

---

1 2 3

const { agent } = toRefs(props) let form = ref(agent)

---

en faisant ca, form est une ref sur une ref, donc dans ton template, il aurait fallu faire

Code:

---

form.value.nom par exemple

---

Si tu changes pour

Code:

---

const { agent: form } = toRefs(props)

---

je pense que ca passait
Par ailleurs un autre point dont je ne suis pas sur que ce soit bon:

Code:

---

1 2 3 4

let agent = reactive({}) //Appel a mon api pour charger mes donnees agent = response.data

---

En écrivant agent = response.data, je pense que tu casses l'objet réactif.
J'aurai fait

Code:

---

1 2 3 4

let agent = reactive({}) //Appel a mon api pour charger mes donnees agent = reactive(response.data)

---

Merci @gwyohm pour tes explications.

C'est vrai qu'avec provide je trouve ca plus simple.
J'ai testé de la facons suivante :

Dans mon composant parent :

Code:

---

1 2 3 4 5 6

const agent = reactive({}) ... //Appel api agent.value = response.data provide('agent', agent)

---

Et dans mon composant enfant :

Code:

---

1 2 3 4 5

const agent = inject('agent', {}) return { agent }

---

Pour le template :

Code:

---

<q-input class="col-5 q-mr-sm" v-model="agent.value.nom" label="Nom" stack-label :dense="dense" readonly />

---

Cela fonctionne si j'ai une valeur mais au chargement de ma page ca plante et m'indique que value n'est pas définie. Et si je n'indique pas value, il ne m'affiche rien.
J'ai testé également avec ta remarque

Code:

---

1 2	agent.value = reactive(response.data)

---

Mais cela ne change rien.

J'ai finalement résolu mon problème de la sorte

Code:

---

1 2 3 4 5 6

//Si mon API me retourne une valeur agent.value = response.data   //Sinon agent.value = {value: {}}

---