0

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!

TehEbil
  • 88
  • 6
  • 1
    Possible duplicate of [VueJs 2.0 emit event from grand child to his grand parent component](https://stackoverflow.com/questions/42615445/vuejs-2-0-emit-event-from-grand-child-to-his-grand-parent-component) .... the answers to this demonstrate *many* techniques – Dexygen Dec 22 '19 at 15:42

2 Answers2

1

Just use custom events

Inside click-to-edit component

<input @input="$emit('update', $event.target.value)" />

Parent:

<click-to-edit v-model="todos[idx].text" :editable="true" @update="$emit('update', $event, todos[idx].a, todos[idx].b)"></click-to-edit>

Grand parent:

<Parent @update="onUpdate" />

methods: {
  onUpdate(childArgument, parentArgumentA, parentArgumentB) {
   // do whatever
  }
}
tony19
  • 125,647
  • 18
  • 229
  • 307
Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • Thank you for this approach, this will for sure help many people. I actually have a similiar approach but I still am interested if there is a solution. I had similar cases before and I always had to look for another way, e.g. it might be possible that click-to-edit is a non-editable, imported library or whatever. I mean something like using apply/bind where you just append the function with its child function – TehEbil Dec 22 '19 at 15:47
0

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 :)

TehEbil
  • 88
  • 6
  • So now you'v changed what `this` means...before it was grandparent, now it's parent. Try to do something useful inside (not just logging) and you will see. Simply bad bad idea... – Michal Levý Dec 22 '19 at 16:07
  • I don't understand exactly what you mean, sorry. I am not just logging them out, I actually use it like that and it works for me. In the mid-child, I pass ...arguments to the grandparent and grandparent receives all parameters I expected. I know I abused the context variable with 'this', but I actually don't need that context anyway, I just wanted to override the delegated function to apply additional arguments – TehEbil Dec 22 '19 at 16:25