首页 > 解决方案 > 当字段处于焦点时,VueJS 会触发一个事件

问题描述

我有一个 VueJS 的密码更改页面,我只想在用户单击新密码字段时查看密码策略。问题是我找不到页面是否在焦点上..

<b-row>
  <b-col>
    <b-form-group id="newPasswrd" label="New Password" :state="statePassword">
      <b-input-group>
        <b-form-input id="newPassword" v-model="passwords.newPassword" ref="newPassword" placeholder="Passwort" type="password" maxlength="60" />
        <p class="password-description"  >Must be at least 8 characters and contain at least two of the following: Upper case, Lower case, special characters or numbers</p>            
      </b-input-group>
    </b-form-group>
  </b-col>
</b-row>

这就是我在页面的脚本部分中用于测试的内容:

      if (this.$refs.newPassword.focus() == true) console.log("focus");

我的计划是最终将此行放入计算中并为其附加一个布尔值以查看/隐藏字段下方的文本,具体取决于它是否处于焦点。发生的情况是,当我触发写入此条件的方法时,我在控制台中什么也得不到,但是焦点却转到了该字段,这不是我想要的。如果该字段处于焦点位置,我应该怎么做才能获得布尔值?

标签: javascriptvue.jsfrontend

解决方案


v-on使用native修饰符绑定:

v-on:focus.native="onFocus"

来自核心成员

将本机事件绑定到组件


推荐阅读