Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I load this dynamic components in Vue 3 composition API?

Im trying to load a component with the name that I get from the database, but it keeps sending me the error
[Vue warn]: Component is missing template or render function.

import SimpleQuestions from '@/components/SimpleQuestions.vue';

const templates = {
  SimpleQuestions,
}

const getMissionComponent = async (name) =>{
  let missionInfo = await userStore.getMissionInfo(email.value, roomID.value, name);
  let templateName = missionInfo.template; 
  switch (templateName){
    case 'SimpleQuestions':
      return templates[templateName];

<div v-for="(mission, index) in missions" :key="index">
      <component :is="getMissionComponent(mission)"></component>
    </div>

When I put directly in the :is the words SimpleQuestions it detects the component and it loads, but in the function, it does not.
Does anyone have an idea about what is happening?

Tags:

2

Answers


  1. 0

    If you want to use async components,you need use defineAsyncComponent to creat it according to the vue document

    import SimpleQuestions from '@/components/SimpleQuestions.vue';
import {
  defineAsyncComponent
} from 'vue'

const templates = {
  SimpleQuestions,
}
const getMissionComponent = async(name) => {
  let missionInfo = await userStore.getMissionInfo(email.value, roomID.value, name);
  let templateName = missionInfo.template;
  switch (templateName) {
    case 'SimpleQuestions':
      return templates[templateName];

  }
}

function creatAsyncComponent(prop) {
  return defineAsyncComponent(()=>getMissionComponent(prop))
}

<div v-for = "(mission, index) in missions": key = "index" >
  <component: is = "creatAsyncComponent(mission)" ></component> 
</div>
    Login or Signup to reply.
  2. 0

    Your code is incomplete – we don’t have your mission component template and don’t know which props or child components you want to pass to it. Anyway, use compile():

    import {compile} from 'vue';
const missionComponent = ref();

// in getMissionComponent:
missionComponent.value = templates[templateName];

// in template pass a mission object as props
<component :is="missionComponent" v-bind="mission"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search