Search code examples
javascriptvue.jsvue-componentecmascript-5arrow-functions

How to pass params of a 'delegated' function to another function from child to parents?


I have a question. How can I call a (delegated) function and also add some parameters to it, is there a vay in javascript?

I have created a litle example: https://jsfiddle.net/p7kL5mvw/

In the grandchild, I have a OnEdit function. It shall call its parents onEdit function, so the grandparent component receives a) the changed value and b) prop a and b from middle (TableView).

I look for something so I can say in this line:

<click-to-edit v-model="todos[idx].text" :editable="true" :pOnEdit="onEdit"></click-to-edit>

call onEdit function of my parent, pass the value which gave by my child and also add MY arguments, something like:

:pOnEdit="onEdit(() => childArgument, todos[idx].a, todos[idx].b)

Is it possible somehow, or how would you solve this problem? Thank you very much for your help!


Solution

  • Actually I found a solution. Since you can use javascript inside VueJS templates, it just works with:

    :pOnEdit="onEdit.bind(this, todos[idx].a, todos[idx].b)"

    Then the grandparent has arguments of grandchild and child. I hope it helps if someone has the same question :)