Как передать массив реквизиту в Vue при использовании Typescript и декоратора компонента класса

Question

Кажется, я не могу найти правильный способ передачи массива в качестве опоры компоненту в Vue, используя Typescript и библиотеку компонентов класса. Следуя официальному шаблону , я попытался сделать следующее:

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

Включение этого в некоторый шаблон:

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

На самом деле работает и дает следующий вывод:

["Это", "есть", "Боб"]

Что я хочу, но это, конечно, не может быть правильным способом передачи массивов в качестве реквизита? Я даже не определяю propsMessage как String[]. Проведя некоторое исследование, я обнаружил эту статью , в которой упоминается, что существует ошибка , связанная с этой проблемой. Эта проблема была исправлена ​​и была объединена совсем недавно . Итак, сейчас должен быть способ сделать это, но я не могу найти никакой документации о том, как это сделать правильно.

Answer 1

Я думаю, что вы фактически передаете параметр в виде строки, а не в виде массива строк.Я не могу проверить этот код прямо сейчас, но он может подтолкнуть вас в правильном направлении.Дайте мне знать, если у вас возникли проблемы с его реализацией.

Компонент таблицы (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>

Домашний компонент, в который загружен компонент таблицы:

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