VueJS вызывает событие, когда поле находится в фокусе

Question

У меня есть страница смены пароля с 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");

Мой план состоит в том, чтобы в конечном итоге поместить эту строку в вычисляемую и добавить к ней значение bool для просмотра / скрытия текста под полем в зависимости от того, находится ли он в фокусе. Что происходит, так это то, что я ничего не получаю в консоли, когда запускаю метод, в котором записано это условие, но вместо этого основное внимание уделяется полю, а это не то, что мне нужно. что я должен сделать, чтобы получить значение bool, если поле находится в фокусе?

Answer 1

Вы пробовали это только с css?

Если вам не нужно поддерживать IE11 / Edge:

b-input-group:focus-within>p {
    display: block;
}

Если вам требуется поддержка IE11 / Edge:

input:focus + p {
    display: block;
}

Я бы также рекомендовал добавлять классы вместо элементов barebone.

Answer 2

Привязка с использованием v-on с модификатором native:

v-on:focus.native="onFocus"

От основного члена

Привязка собственных событий к компонентам

Answer 3

Вы можете создать пользовательскую директиву

Образец из официальных документов Vuejs

Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})