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

Question

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.

JKL · Accepted Answer · 2019-01-18 11:04:55Z

6

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>

edited Jan 18, 2019 at 11:04

answered Jan 17, 2019 at 14:15

JKL

1,0709 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joachim Over a year ago

This does seem to work, but it also gives me the following warning Array type using 'Array' is forbidden for simple types. Use 'T[]' instead.. Changing propsMessage!: Array<string>; to propsMessage!: string[]; does seem to remove the warning though.

JKL Over a year ago

Glad to hear it works. I updated the answer with your fix for the warning.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related