Vue Could not trigger child component function

Question

I have a child component selectServiceChargeComponent inside a parent component (Saving Invoice Component). Child component is simply a form inside a table. If clicked on add row button new row would be formed. Problem is when I click on add row button, the following error arises:

After looking some SO answers, I found ref would help to trigger a function in child component. So, in parent's component I used a ref inside child component and create a add row button underneath it and tried to trigger a click function addRow().

So that I could use this.$refs.serviceChargeComponent.addRow();.
But another problem came in return.

It seems addRow isn't defined in your child component. Can you share your child component's code. — Kshitij Dhakal
– Kshitij Dhakal, Commented May 15, 2020 at 9:51

Kshitij Dhakal · Accepted Answer · 2020-05-16 06:25:48Z

1

It looks like addRow() function is outside of methods:{}. Methods in vue should be defined inside methods: {}.

answered May 16, 2020 at 6:25

Kshitij Dhakal

84413 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Could not trigger child component function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related