我正在使用vue.js和vue-cli构建一个应用程序，您可以在其中配置订单。用户应该能够选择是否要在每个订单后配置另一个订单，或者是否完成。为了实现这一目标，我想递归地重用我的订单组件：
订单.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>
应用程序视图：
<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>
正如您所看到的，我在组件中使用了一个布尔变量，如果单击“配置附加订单”按钮，该变量应该再次显示相同的组件。我使用自定义事件将数据传递到父组件 (App.vue)，订单组件只需进一步传递它们即可处理来自其递归子组件的这些事件。
应用程序本身可以工作，但是单击按钮来配置附加订单除了发出自定义事件之外什么也不做。我在这里做错了什么？
凤凰求蛊
相关分类