Licence CC 0

Vue.js, TypeScript et données

Heureusement qu'il y a la doc !

Publié :
Auteur :
Catégorie :
Temps de lecture estimé : 1 minute

Je suis toujours sur mon projet qui utilise le combo Vue.js + TypeScript en front. Aujourd’hui, je voulais remplir une data table avec des données reçues par appel à une API. Côté réception des données, aucun soucis, ils sont bien là. Par contre, pour l’affichage, ça été plus compliqué.

Voici à quoi ressemble la partie script de mon fichier .vue en cours d’édition.

export default {
    mounted()
    {
        this.getAllPosts();
    },
    data()
    {
        return {
            headers: [
                { text: 'ID', value: 'id' },
                { text: 'Title', value: 'title' },
            ],

            posts: [] as Post[]
        }
    },
    methods:
    {
        getAllPosts(): void
        {
            api.entities.posts.getAll().then((response) => { this.posts = response as Post[] });
        }
    }
};

L’affichage n’est pas important, pas plus que la moitié du code. Ce qui compte, c’est la méthode getAllPosts. Sauf que celle-ci ne fonctionnait pas. Impossible de savoir pourquoi, mais pour le compilateur, this.posts n’existe pas et je n’ai accès qu’à getAllPosts quand je fais this. + Ctrl+Space. Bizarre quand même !

De plus, impossible de comprendre pourquoi tous les codes sur Internet, si identiques, sont fonctionnels. Et mon frère me pose alors une question qui m’éclaire : « Mais ton code, c’est du JavaScript ou du TypeScript ? » Parce que oui, tous les codes que j’ai vu sont en JavaScript 100% standard. Alors il me dirige vers la documentation. Je note un léger changement par rapport à mon code.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
/* ... */
});

En fait, avec TypeScript, il y a deux solutions. Soit utiliser Vue.extend, soit à l’aide de décorateurs, pour créer des classes et non plus de simples objets.

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class Posts extends Vue {
/* ... */
}

Je vous invite à lire cet article qui donne quelques précisions à mes propos. En tout cas, Vue.js a un avantage, c’est d’avoir une documentation claire, propre et assez exhaustive. :)



2 commentaires

C’est là qu’on se rend compte que lorsque ça marche chez les autres et pas chez nous, ça viens souvent d’un petit détail insignifiant, trop évident pour être vu par nos yeux :lol:

Tu n’a pas un canard (ou what ever you want) à qui parler sur ton bureau ? :D

Édité par Heziode

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte