Search code examples
javascripthtmlbootstrap-4vuejs3

add icon into select tag and add action to this icon

I´m traying to do a "preview action" in my component vuejs 3.

To do this, i´m trying with:

<select class="selectpicker">
  <option @click='prueba($event)' data-content="<i class='fa fa-eye mr-5' aria-hidden='true'></i>Option1"></option>
</select>

this generate:

enter image description here

But i want that when i clicked in eye, open modal with information contract to select this contract or other... My problem it´s that @click not run, not go to function "prueba" and show a console.log()

i don´t know if exist one way better to build this, i´m working with bootstrap 4 and vuejs 3. I think that my best way it´s a link into select andthis link open modal with information contract. But if anybody have other better solution i´m earding it.

Thanks for readme and hekp me

Solution

  • The option element is not designed to directly support click events.

    <select class="selectpicker"  @change='prueba($event)'>
  <option data-content="<i class='fa fa-eye mr-5' aria-hidden='true'></i>Option1"></option>
</select>