skip to Main Content

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?

2

Answers


  1. 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. 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