Discussion :

[itokia]

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 :

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

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 :

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

<monComposant:agent="agent"/>

Ensuite dans mon template enfant :

Code :

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

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 :

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
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?

[itokia]

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.

[gwyohm]

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 :

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

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 :

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

form.value.nom par exemple

Si tu changes pour

Code :

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

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 :

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

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 :

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

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

[itokia]

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 :

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

1
2
3
4
5
6
 
const agent = reactive({})
...
//Appel api
agent.value = response.data
provide('agent', agent)

Et dans mon composant enfant :

Code :

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

1
2
3
4
5
 
const agent = inject('agent', {})
return {
      agent
    }

Pour le template :

Code :

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

<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 :

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

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

Mais cela ne change rien.

[itokia]

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

Code :

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

1
2
3
4
5
6
 
//Si mon API me retourne une valeur
agent.value = response.data
 
//Sinon
agent.value = {value: {}}