I have a component called 'Page' that needs to display another component retrieved via props.
Currently, I am able to successfully load my component by hardcoding the path in the data like this:
<template>
<div>
<div v-if="includeHeader">
<header>
<fv-header/>
</header>
</div>
<component :is="this.componentDisplayed" />
<div v-if="includeFooter">
<footer>
<fv-complete-footer/>
</footer>
</div>
</div>
</template>
<script>
import Header from '@/components/Header/Header';
import CompleteFooter from '@/components/CompleteFooter/CompleteFooter';
export default {
name: 'Page',
props: {
componentPath: String,
includeHeader: Boolean,
includeFooter: Boolean
},
data() {
componentDisplayed: function () {
const path = '@/components/my_component';
return imports(path);
},
},
components: {
'fv-header': Header,
'fv-complete-footer': CompleteFooter,
},
}
</script>
However, I encountered an issue where I couldn't reference my props within the function due to 'this' being undefined.
I attempted to use computed properties instead of data but received an error "Cannot find module '@/components/my_component'". Is there a way to resolve this as I'm still new to vue.js?
computed: {
componentDisplayed: function () {
const path = `@/components/${this.componentPath}`;
return imports(path);
},
},
I believe there is a solution to this problem, but I may need some guidance as I am still learning Vue.js :)