How to attach a vue @click event to a font-awesome icon next to input field?

Question

I tried to add an @click to a font awesome icon. However, whether I add an @click event to span or i tag, it doesn't work at all. I suspect the event is taken by the input field. How can I make the magnifier icon clickable?

<div class="control has-icons-right">
    <input  v-model="keyword" @keyup.enter="findName" class="input is-large" type="text" placeholder="Input 1 word, hit Enter"/>
    <!-- or 2 words separated by space -->                      
      <span class="icon is-right" @click="findName">
        <i class="fa fa-search"></i>
      </span>
</div>

Source: 3sName.com

Answer 1

It is because, you are using bulma class .icon which having the following css.

pointer-events: none;

Try to override it with

pointer-events: all;

pointer-events css will prevent your element from emitting a click event.

:)

Answer 2

use a button / anchor 'a' instead span to wrap the fa-icon, along with @click method? Span isn't good practice for click event as well.

Answer 3

Have you tried @click.prevent="findName" modifier?