Discussion :

[mathisdu42]

Bonjour à tous,

Je m'initie petit à petit à la combinaison VueJS + TypeScript et suis à l'heure actuelle confronté à un souci avec mes propriétés.
Ce dont j'utilise :

• TypeScript.
• Axios.
• Injecteur (grossièrement c'est pour éviter de créer des instances de classe dans les constructeurs).
• Linq to TypeScript (https://www.npmjs.com/package/linq-typescript) (étant très familier avec l'environnement C#, j'utilise un package qui me permet de manipuler les collections plus ou moins à la manière linq).

Dans un premier temps, je dispose d'une méthode async qui a pour but de faire un appel get et de retourner une promesse KeyValue
Classe : Pays

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
    public async GetDico(): Promise<Array<IKeyValue<number, string>>> {
		const vals: Array<IKeyValue<number, string>> = [];
 
		return await dataApi.get("pays").then((rep) => {
			(rep.data as List<Pays>).forEach((x) => {
				vals.push({key: x.Id, value: x.Libelle});
			});
 
			return vals;
		});
	}

ensuite, j'appelle cette méthode dans une seconde classe dont le but est d'injecter les données récupérées dans un Array lorsque la classe est instanciée
Classe : Profil

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
 
@Service()
export default class Profil {
    public Id: number;
    public IdUtilisateur: number;
    public Prenom: string;
    public Nom: string;
    public DateNaissance: Date;
    public IdGenre: number;
    public IdPays: number;
 
    public dicoPays: Array<IKeyValue<number, string>>;
 
    constructor() {
        this.initDicoPays();
    }
 
    public async initDicoPays() {
        return await Injecteur.resolve<Pays>(Pays).GetDicoo()
        .then((rep) => this.dicoPays = rep);
    }
}

Les choses vont se compliquer du côté de la vue. Lorsque je vais instancier une nouvelle classe Profil,
la méthode initDicoPays sera applée puis les données seront stockées dans la prop dicoPays.

Le problème est que lorsque je log la prop dicoPays depuis la vue, elle apparait "undefined" alors qu'elle n'est pas censé l'être, en revanche,
lorsque je log mon objet "Profil" toujours depuis la vue, la prop dicoPays apparait bel et bien et avec les données !

Une idée de ce à quoi ressemble ma 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
 
<script lang="ts">
import Profil from "@/appConfig/pocos/Profil";
import { Component, Vue } from "vue-property-decorator";
 
@Component
export default class PremiereEtape extends Vue {
	public profil: Profil = new Profil();
	public form = this.$form.createForm(this, { name: "premiere_etape" });
 
	public created() {
		console.log(this.profil);
		console.log("DicoPays :", this.profil.dicoPays);
	}
}
</script>

La boucle v-for

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
 
<div class="col-md-6">
	<a-form-item label="Nationalité" has-feedback>
		<a-select
			v-decorator="[
			'select',
			{ rules: [{ required: true, message: 'Veuillez sélectionner un pays' }] },
			]"
			placeholder="Veuillez sélectionner un pays"
		>
			<a-select-option v-for="item in profil.dicoPays" :value="item.value" :key="item.key">
				{{ item.value }}
			</a-select-option>
		</a-select>
	</a-form-item>
</div>

Ce que les logs retournent :



(La belle faute ahah)

Cette Vue est un "composant", il est rendu de cette manière depuis une autre vue:

Vue : Conteneur.vue

Code :

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

<component class="mt-5" :is="steps[current].content"></component>

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
 
        steps: [
            {
                title: "Infos. principales",
                content: PremiereEtape, // Lieu du problème (vue)
            },
            {
                title: "Infos. complémentaires",
                content: SecondeEtape,
            },
            {
                title: "Finalisation",
                content: TroisiemeEtape,
            },
        ],

J'ai forcément dû louper quelque chose, il me semble bizarre que depuis cette vue il ne soit pas possible d'accéder à ces props..
Le problème viendrait-il de la manière dont le composant est rendu ?

J'aussi tenté une autre manière, plutot que de passer par la classe Profil, j'ai ajouté les méthodes directement dans la vue mais
une boucle infinie se forme avec le dicoPays.

Voilà, navré pour la longueur de ce post, j'ai voulu être le plus concis possible tout en donnant les bonnes infos. !
Merci par avance,

Mathis.