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

The code works - try it as a CodePen on CodeSandbox and you will see. — IVO GELOV, Jul 08 '20 at 09:54

score 3 · Accepted Answer · answered Jul 08 '20 at 11:00

3

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.

:)

answered Jul 08 '20 at 11:00

Stark Buttowski

1,799
2
10
21

score 0 · Answer 2 · answered Jul 08 '20 at 09:55

0

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.

answered Jul 08 '20 at 09:55

SC Kim

545
4
14

both button and anchor don't work. Tested in my local PC environment – Benny Chan Jul 08 '20 at 10:12

score 0 · Answer 3 · answered Jul 08 '20 at 10:39

0

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

answered Jul 08 '20 at 10:39

arcil

41
7

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

3 Answers3