Comment passer un tableau aux props dans Vue lorsque l'on utilise Typescript et le décorateur de composant de classe ?

Question

Je n'arrive pas à trouver la bonne façon de passer un tableau en tant que prop à un composant dans Vue, en utilisant Typescript et la bibliothèque class component. En suivant le modèle officiel J'ai essayé de faire ce qui suit :

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';

const AppProps = Vue.extend({
    props: {
        propsMessage: String,
    },
});

@Component({})
export default class Table extends AppProps {
    mounted() {
        console.log(this.propsMessage);
    }
}
</script>

L'inclure dans un modèle :

<template>
  <Table :propsMessage="['This', 'is', 'Bob']" />
</template>

Cela fonctionne effectivement et donne le résultat suivant :

["Ceci", "est", "Bob"]

C'est ce que je veux, mais ce n'est sûrement pas la bonne façon de passer des tableaux en tant qu'accessoires ? Je ne définis même pas l'élément propsMessage como String[] . En faisant quelques recherches, j'ai trouvé cet article mentionnant qu'il existe un insecte en rapport avec cette question. Ce problème a été corrigé et a été ont fusionné récemment . Il devrait donc y avoir un moyen de le faire maintenant, mais je ne trouve aucune documentation sur la façon de le faire correctement.

Answer 1

Je pense que vous passez le paramètre en tant que chaîne de caractères et non en tant que tableau de chaînes de caractères. Je ne suis pas en mesure de tester ce code pour l'instant, mais cela pourrait vous mettre sur la bonne voie. Faites-moi savoir si vous avez des problèmes pour l'implémenter.

Composant Table (Table.vue) :

<template>
    <div>
        <h1>This is my table component</h1>
    </div>
</template>

<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';

    @Component
    export default class Table extends Vue {

        @Prop({ type: Array, required: true })
        propsMessage!: string[];

        constructor()
        {
            super();

            console.log(this.propsMessage);
        }
    }
</script>

Composant d'accueil dans lequel le composant tableau est chargé :

<template>
    <my-table :propsMessage="myArray"></my-table>
</template>

<script lang="ts">

    import Vue from 'vue';
    import Component from 'vue-class-component';
    import Table from 'WHERE-YOUR-TABLE-COMPONENT-IS-LOCATED'

    Vue.component('my-table', Table);

    @Component({
        components: { Table }
    })
    export default class Home extends Vue {

        myArray: Array<string> = [];

        constructor() {
            super();

            this.myArray = ['This', 'is', 'Bob'];
        }
    }
</script>