[Vuejs]-Vue dynamic ref show dropdown

by

0👍

✅

You can send another parameter to the handler function that will be the value of the $ref you want to open:

<div class="info" @contextmenu="handler($event, id)">
    ...

    <b-dropdown size="sm" text="…" variant="transparent" no-caret :ref="`dropdown-${id}`" :item1="this.item1" :item2="this.item2">
      <b-dropdown-item @click="showDetails(item1, item2)">Send</b-dropdown-item>
    </b-dropdown>
</div>



handler(e, id) {
  this.$ref[`dropdown-${id}`].show();
  e.preventDefault();
}

By the way you can use .prevent modifier instead of using the e.preventDefault:

<div class="info" @contextmenu.prevent="handler(id)">

// your methods
handler(id) {
  this.$ref[`dropdown-${id}`].show();
}

0👍

You could use e.target to get the element (button) you just clicked and after that use a switch statement to determine which dropdown to show.

Leave a comment