create a component inside a component, getting error: “Failed to mount component: template or render function not defined.”

Question

trying to make a component (tag: simple-div-container) that on a button press will create 2 (tag: simple-div) components, inside each new simple-div there will be a simple-div-container.

so I can create "endless" components inside each other.

I have simple-div-container and when I press the button I get 2 simple-div but I don't get inside them the NEW simple-div-container.

I get an error:

Failed to mount component: template or render function not defined.

code for tag: simple-div-container

<template>
  <div>
    <button @click="insert2Div" class="div-controler">insert 2 div</button>
    <div v-if="divs" class="horizontal-align">
      <simplediv v-if="divs" :style="{height: simpleDivHeight + 'px',width: simpleDivWidthPrecent/2 + '%', border: 1 + 'px solid' }"
        :height="simpleDivHeight" :widthPrecent="simpleDivWidthPrecent" :isRender="true"></simplediv>
      <simplediv v-if="divs" :style="{height: simpleDivHeight + 'px',width: simpleDivWidthPrecent/2 + '%', border: 1 + 'px solid' }"
        :height="simpleDivHeight" :widthPrecent="simpleDivWidthPrecent" :isRender="true"></simplediv>
    </div>
  </div>
</template>
<script>
  import SimpleDiv from '../simple-div/simpleDiv.vue';
  export default {
    props: {
      simpleDivHeight: {
        require: true,
        type: Number
      },
      simpleDivWidthPrecent: {
        require: true,
        type: Number
      }
    },
    data() {
      return {
        divs: false,
      }
    },
    methods: {
      insert2Div() {
        console.log('insert 2 div')
        this.divs = true;
      },
    },
    components: {
      simplediv: SimpleDiv
    },
  }

</script>
<style scoped>
  .horizontal-align {
    display: flex;
    flex-direction: row;
  }

</style>

code for tag: simple-div

<template>
  <div>
      <simple-div-container v-if="isRender" :simpleDivHeight="height" :simpleDivWidthPrecent="widthPrecent/2"></simple-div-container>
  </div>
</template>
<script>
  import simpleDivContainer from '../simple-div-container/simpleDivContainer.vue';
  export default {
    props: {
      height: {
        require: true,
        type: Number
      },
      widthPrecent: {
        require: true,
        type: Number
      },
      isRender:{
        require: true,
        type: Boolean
      }
    },
    data() {
      return {
        isDivContainer: false
      }
    },
    components: {
      'simple-div-container': simpleDivContainer
    }
  }

</script>
<style scoped>
  .div-controler {
    position: fixed;
    transform: translate(-10%, -320%);
  }

</style>

an interesting point: if i add to simple-div data some property(while webpack listens to changes) than it will automatically rerender and the new simpe-div-container will show

Mario Alberto Contreras Mario Alberto Contreras · Accepted Answer · 2017-01-30T17:05:47

You have a circular reference problem. You should check if registering the simple-div component in the beforeCreate lifecycle hook helps. In the simple-div-container: In the simple-div-container:

  beforeCreate () {
     this.$options.components.simple-div = require('../simple-div/simpleDiv.vue')
}

create a component inside a component, getting error: “Failed to mount component: template or render function not defined.”

1 Answers