Vue Recursive Component Not Rendering

Question

I am building an application with vue.js and vue-cli where you can configure an order. The user should be able to choose whether they want to configure another order after each order or if they are done. To achieve this, I want to reuse my order component recursively:

Order.vue:

<template>
  <div id="order">
    <other> // just to show that I used other components here and how
    <div>
      <button class="CustomButton" v-on:click="finalizeOrder">
        Finalize Order
      </button>
      <button class="CustomButton" v-on:click="configureAdditionalOrder">
        Configure Additional Order
      </button>
    </div>
    <order v-if="additionalOrder" @passOrderObject="catchOrderObjectFromRecursiveChild" @finalizeOrder="passFinalizeOrder" />
  </div>
</template>

<script>
import Other from '@/components/Other.vue'

export default {
  components: {
    Other
  },
  data () {
    return {
      additionalOrder: false
    }
  },
  methods: {
    configureAdditionalOrder () {
      this.buildOrderObject()
      this.additionalOrder = true
    },
    catchOrderObjectFromRecursiveChild (order) {
      this.$emit('passOrderObject', order)
    },
    passFinalizeOrder () {
      this.$emit('finalizeOrder')
    },
    finalizeOrder () {
      this.buildOrderObject()
      this.$emit('finalizeOrder')
    },
    buildOrderObject () {
      var order = {
        name: "abc",
        price: "1000"
      }
      this.$emit('passOrderObject', order)
    }
  }
</script>

<style>

</style>

App.vue:

<template>
  <div id="app">
    <h1>Ordering System</h1>
    <order @passOrderObject="catchOrderObject" @finalizeOrder="finalizeOrder" />
  </div>
</template>

<script>
import Vue from 'vue'
import Order from '@/components/Order.vue'

export default {
  el: '#app',
  components: {
    Order
  },
  data () {
    return {
      finalization: false,
      orderObjects: []
    }
  },
  methods: {
    finalizeOrder () {
      this.finalization = true
    },
   catchOrderObject (order) {
      this.orderObjects.push(order)
    }
</script>

As you can see, I used a boolean variable in my component that should show the same component an additional time if the button "Configure Additional Order" is clicked. I use custom events to pass data to the parent component (App.vue), and the order component can handle these events from their recursive children by just passing them further.

The app itself works, but clicking the button to configure an additional order does nothing except emitting the custom event. What did I do wrong here?

Answer 1

For recursive component you should provide a name to that component:

<script>
import Other from '@/components/Other.vue'

export default {
  name:'order',// this is the component name
  components: {
    Other
  },
  data () {
    return {
      additionalOrder: false
    }
  },
...