1 pièce(s) jointe(s)
Propriété de classe inaccessible depuis une Vue
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:
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:
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:
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:
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 :
Pièce jointe 590955
(La belle faute ahah)
Cette Vue est un "composant", il est rendu de cette manière depuis une autre vue:
Vue : Conteneur.vue
Code:
<component class="mt-5" :is="steps[current].content"></component>
Code:
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.
