Currently, I am in the process of developing an application utilizing vue.js and vue-cli. This specific application allows users to configure orders. The main feature I am working on is giving users the option to either proceed with configuring another order after completing one or to indicate they are finished. To implement this functionality, my approach involves reusing the order component recursively:
Order.vue:
<template>
<div id="order">
<other> // included for demonstration purposes
<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>
Incorporating a boolean variable within the component enables it to display an additional instance of itself when the "Configure Additional Order" button is clicked. Custom events facilitate passing data to the parent component (App.vue), where the order component can manage these events efficiently by transmitting them further down the hierarchy.
The application functions as intended. However, upon clicking the button to configure an extra order, no action occurs besides emitting the custom event. What might be causing this issue?