De idea is not to program the name, but to pass the name as a property.
So i can have a base vue component and i tell what vue component to load in there dynamicly by giving name and location. Which works perfect when i type the string (set the name) but not when i put the name in a string then it says module not found.
so if I import('./yyy.vue') it works but if. but if I import(var_that_is_the_name) it says not found. i think it has something to do with laravel mix or stringparsing.
<template>
<div class="xxx" ref="xxx">
<component :is="dynamicComponent"></component>
<div class="right">
right {{ this.DvueLocation }}
</div>
</div>
</template>
<script>
import { defineAsyncComponent } from '@vue/runtime-core'
export default {
name: 'xxx',
components: {
},
props: {
DvueLocation: {
type: String,
default: "./yyy.vue",
},
DvueName: {
type: String,
default: "yyy"
}
},
data: function () {
return {
isMounted: false,
}
},
computed: {
dynamicComponent() {
console.log(this.DvueLocation);
return defineAsyncComponent(() => import('./yyy.vue'))
return defineAsyncComponent(() => import(this.DvueLocation))
}
},
}
</script>
the yyy.vue is a simple component that prints yyy.
first line works, second with not cold not add // for it and save. i tried putting "'" + around it en lots more
while its exactly the same if i type it. both the string printed and on console of browser gives the right value
Something to do with string parsing.
return defineAsyncComponent(() => import('./' + this.DvueName))
This works for me now!