Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

269
Views
Adding dynamic async component by name in variable

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Something to do with string parsing.

return defineAsyncComponent(() => import('./' + this.DvueName))

This works for me now!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!