How to pass array to props in Vue when using Typescript and class component decorator

user_10815141 0
Viewed 10372

I can't seem to figure out the correct way to pass an array as a prop to a component in Vue, using Typescript and the class component library. Following the official template, I tried doing the following:

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

Including this in some template:

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

Does actually work, and gives the following output:

["This", "is", "Bob"]

Which is what I want, but this surely cannot be the correct way to pass arrays as props? I am not even defining the propsMessage as String[]. Doing some research, I found this article mentioning that there is a bug related to this issue. This issue has been fixed, and has been merged just recently. So, there should be a way to do this now, but I cannot find any documentation on how to do this correctly.

vue.js typescript components class
1 Answers

I think you actually pass the parameter as a string now and not as an array of strings. I'm not able to test this code right now but it might push you in the right direction. Let me know if you're having problems implementing it.

Table component (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>

Home component in which the table component is loaded:

<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>
user_48104780
Related