An Issue I'm Facing
I am currently attempting to pass a prop to my root constructor. To achieve this, I have been exploring the use of propsData, which I learned about from this resource:
var appComponent = Vue.component('app', require('./components/app/app.vue.html'));
new Vue({
el: '#app-root',
router: new VueRouter({ mode: 'history', routes: routes }),
propsData: { test: 'hi!' },
components: { appComponent },
render: h => h('app')
});
The above code snippet pertains to the AppComponent receiving the prop:
export default class AppComponent extends Vue {
@Prop()
test: string;
mounted() {
console.log('test = ' + this.test);
// result: test = undefined
// expected: test = 'hi!'
}
}
Attempts and Experiments
To make it function correctly during development (although not in production), I tried the following approach:
test: string;
beforeCreate() {
this.test = this.$root.test;
}
This method proved to be effective on a development environment (specifically Windows). However, upon deployment (on Linux), I encountered a TypeScript error:
ERROR in [at-loader] ClientApp/components/app/app.ts:14:34
TS2339: Property 'test' does not exist on type 'Vue'.
If you are facing a similar challenge, you can refer to this related post.