pass value into multiple functions

Question

I have a v-for in a v-for. After clicking on my selected dropdown-item I pass my data to my methods - this works well, of course.

But now I need the exact itemDropdown.ID in another function in my methods...

Do I have to pass data from method to method or how can I solve that?

Thank You!

<div v-for="(item, index) in json" :key="index">
  <b-dropdown text="Selection" right>
    <b-dropdown-item v-for="(itemDropdown, indexDropdown) in json2" :key="indexDropdown" @click="inputDropdown(itemDropdown.ID)">{{itemDropdown.Name}}</b-dropdown-item>
  </b-dropdown> 
</div>

methods: {
  inputDropdown(ID) {
    //Some code
  },

  anotherFunction(here I need this itemDropdown.ID as well!)
  //Do some code too
  }  
}

Can you call anotherFunction() in inputDropdown() ? Is it mess your logic ? — Batuhan, Oct 20 '21 at 07:09
Does this answer your question? [How to call multiple functions with @click in vue?](https://stackoverflow.com/questions/38744932/how-to-call-multiple-functions-with-click-in-vue) — Batuhan, Oct 20 '21 at 07:10
Not clear what's your issue... How are you invoking `anotherFuntion()`? If you're calling it from `inputDropdown()` the most obvious way is to pass `ID` since it's already in scope — lbsn, Oct 20 '21 at 07:11

score 1 · Accepted Answer · answered Oct 20 '21 at 07:17

1

I think it would be better to write some handler method like that and you can extend the usage with other methods too.

<div v-for="(item, index) in json" :key="index">
  <b-dropdown text="Selection" right>
    <b-dropdown-item v-for="(itemDropdown, indexDropdown) in json2" :key="indexDropdown" @click="dropdownClickHandler(itemDropdown.ID)">{{itemDropdown.Name}}</b-dropdown-item>
  </b-dropdown> 
</div>

I think that it would be more readable in a usage like that.

methods: {
  dropdownClickHandler(ID) {
    this.inputDropdown(ID);
    this.anotherFunction(ID);
  },

  inputDropdown(ID) {
    //Some code
  },

  anotherFunction(ID)
   // Some code
  }  
}

answered Oct 20 '21 at 07:17

AlpSenel

190
1
12

Hi, that seems to work. But just for additional info if ```anotherFunction``` is a current function in my template with parameters like ```anotherFunction(value, value, value)``` is it possible too to pass the ```ID``` into this function too? – B0BBY Oct 20 '21 at 07:40
yes, but you need to modify with additional parameters like `dropdownClickHandler(itemDropdown.ID, itemDropdown.value)`. Or better version just passing `dropdownClickHandler(itemDropdown)` and getting parameters in the `inputDropdown` and `anotherFunction` by using object dessturcturing here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#unpacking_fields_from_objects_passed_as_a_function_parameter – AlpSenel Oct 21 '21 at 08:26

score 0 · Answer 2 · answered Oct 06 '22 at 00:12

You can call multiple methods in the @click="fnA(var); fnB(var);"

<b-dropdown-item v-for="(itemDropdown, indexDropdown) in json2"
                 :key="indexDropdown"
                 @click="inputDropdown(itemDropdown.ID); anotherFunction(itemDropdownID)"
>
    {{itemDropdown.Name}}
</b-dropdown-item>

pass value into multiple functions

2 Answers2