I'm currently struggling to understand the proper method of passing an array as a prop to a component in Vue, using Typescript and the class component library. Following the official template, I attempted the following approach:
<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>
Using this in a template:
<template>
<Table :propsMessage="['This', 'is', 'Bob']" />
</template>
This does work and outputs:
["This", "is", "Bob"]
While it achieves what I want, I doubt if it's the correct way to pass arrays as props. I haven't defined propsMessage as String[]. After some research, I came across this article that mentioned a known bug regarding this issue which has been fixed and recently merged. There should be a proper way to achieve this now, but unfortunately, there is no documentation available on how to do this correctly.