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
– Batuhan, Commented Oct 20, 2021 at 7:09
Does this answer your question? How to call multiple functions with @click in vue? — Batuhan
– Batuhan, Commented Oct 20, 2021 at 7: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
– lbsn, Commented Oct 20, 2021 at 7:11

AlpSenel · Accepted Answer · 2021-10-20 07:17:45Z

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, 2021 at 7:17

AlpSenel

1811 silver badge12 bronze badges

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

2 Comments

B0BBY Over a year ago

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?

AlpSenel Over a year ago

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 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

stoi2m1 · Accepted Answer · 2022-10-06 00:12:39Z

0

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>

answered Oct 6, 2022 at 0:12

stoi2m1

8466 silver badges14 bronze badges

Collectives™ on Stack Overflow

pass value into multiple functions

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related