VueJS trigger an event when a field is in focus

Question

I have a password change page with VueJS, and I want to view the password policy only when the user clicks into the new password field. The problem is that I can't find if the page is in focus..

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

and this is what I have in the script part of the page for testing:

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

My plan is to ultimately put this line in a computed and attach a bool value to it to view/hide the text below the field depending on whether if it is in focus. What happens is that I get nothing in the console when I trigger the method where this condition is written, but the focus comes to the field instead, which is not what I want. what should I do to get a bool value if the field is in focus?

Answer 1

Bind using v-on with the native modifier:

v-on:focus.native="onFocus"

From a Core Member

Binding Native Events to Components