英文:
Vue.js- I am getting "this.cancelOrderFunction is not a function" error while calling method inside a child component
问题
我正在尝试触发一个方法,当点击一个按钮(确认取消)时,该方法会改变currentStatus变量的文本内容。这个按钮位于对话框中的子组件中,而方法应该在父组件中。因此,我尝试将这个方法作为props传递给子组件。在编写以下代码后,我在控制台中得到了错误信息"this.cancelOrderFunction不是一个函数"。我知道这是一个微小的错误,但是找不到它。我已经尝试使用以下代码解决这个错误。
changeStatus.vue(父组件)
<template>
<cancelOrder :cancelOrderFunction="cancelOrderFunction"></cancelOrder>
</template>
<script>
import cancelOrder from "../components/cancelOrder.vue"; /*导入子组件*/
export default {
data: () => ({
currentStatus: "ACTIVE",
}),
methods: {
cancelOrderFunction() {
this.currentStatus = "CANCELLED";
},
},
components: {
cancelOrder,
},
};
</script>
cancelOrder.vue(子组件)
<template>
<v-btn @click="confirmCancelOrder">确认取消</v-btn>
</template>
<script>
export default {
props: ["cancelOrderFunction"],
methods: {
confirmCancelOrder() {
this.cancelOrderFunction();
},
},
};
</script>
cancelOrder.vue组件包含一个按钮取消订单,该按钮进一步打开一个对话框。该对话框包含一个确认取消按钮,当点击该按钮时,对话框应该关闭,并同时触发cancelOrderFunction方法。在我的情况下,对话框一直关闭,但由于上述错误,方法没有被调用。
英文:
I am trying to trigger a method which changes the text content of currentStatus variable, when a button (Confirm Cancel) is clicked. This button is present in the child component inside a dialog box whereas the method should be in the parent component. So I am trying to pass this method as props to child component. After writing the code as below, I am getting the error, "this.cancelOrderFunction is not a function" in the console. I am aware that this is a minute error, but unable to find it. I have tried solving this error with the below code.
changeStatus.vue (Parent Component)
<template>
<cancelOrder :cancelOrderFunction="cancelOrderFunction"></cancelOrder>
</template>
<script>
import cancelOrder from "../components/cancelOrder.vue"; /*importing child component*/
export default {
data: () => ({
currentStatus: "ACTIVE",
}),
methods: {
cancelOrderFunction() {
this.currentStatus = "CANCELLED";
},
},
components: {
cancelOrder,
},
};
</script>
cancelOrder.vue (Child Component)
<template>
<v-btn @click="confirmCancelOrder">Confirm Cancel</v-btn>
</template>
<script>
export default {
props: ["cancelOrderFunction"],
methods: {
confirmCancelOrder() {
this.cancelOrderFunction();
},
},
};
</script>
The cancelOrder.vue component consists of a button Cancel Order which further opens a dialog box. This dialog box consists of Confirm Cancel button which when clicked, the dialog box should close and the cancelOrderFunction should be triggered simultaneously. In my case, the dialog box is being closed consistently, but the method is not being called due the mentioned error.
答案1
得分: 1
变量只能传递给子组件。如果你想从父组件中调用子组件的函数,你应该使用"emit"。
https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events
将其绑定为v-model也是一个好主意,因为它将值和发出的值绑定在一起。这完全取决于具体情况。
以下是使用emit的解决方案,让我知道这是否正是你想要的。
changeStatus.vue(父组件)
<template>
<cancelOrder @cancel-order-function="cancelOrderFunction"></cancelOrder>
</template>
<script>
...
methods: {
cancelOrderFunction(data) {
//根据需要处理数据
}
}
...
</script>
cancelOrder.vue(子组件)
<template>
<v-btn @click="confirmCancelOrder">确认取消</v-btn>
</template>
<script>
export default {
emits: ["cancel-order-function"],
methods: {
cancelOrderFunction() {
this.$emit('cancel-order-function', data);
},
},
};
</script>
英文:
Variables can only be passed to children. If you want to call a function from a child that is in a parent you should use "emit".
https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events
It's also a good idea to bind this as a v-model. Because it binds both value and emitted values into one. It all depends on the case.
Below is the solution how you should do it using emit. Let me know if that's exactly what you meant.
changeStatus.vue (Parent Component)
<template>
<cancelOrder @cancel-order-function="cancelOrderFunction"></cancelOrder>
</template>
<script>
...
methods: {
cancelOrderFunction(data) {
//do whatever you want with data
}
}
...
</script>
cancelOrder.vue (Child Component)
<template>
<v-btn @click="confirmCancelOrder">Confirm Cancel</v-btn>
</template>
<script>
export default {
emits: ["cancel-order-function"],
methods: {
cancelOrderFunction() {
this.$emit('cancel-order-function', data)
},
},
};
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论