如何将 vue @click 事件附加到输入字段旁边的超赞字体图标？

Question

我试图将@click 添加到一个很棒的字体图标。但是，无论我将 @click 事件添加到 span 还是 i 标记，它都不起作用。我怀疑该事件是由输入字段引起的。如何使放大镜图标可点击？

<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>

来源：3sName.com

Answer 1

使用 button / anchor 'a' 而不是 span 来包装 fa-icon，以及 @click 方法？ Span 也不是点击事件的好习惯。

Answer 2

你试过@click.prevent="findName"修饰符吗？

Answer 3

这是因为，您使用的 bulma class .icon 具有以下 css.

pointer-events: none;

尝试用

覆盖它

pointer-events: all;

pointer-events css 将阻止您的元素发出点击事件。

:)

如何将 vue @click 事件附加到输入字段旁边的超赞字体图标？

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

font-awesome-4

vue.js