Vue.js - перенести фокус на компонент

Question

У меня есть фрагмент формы, завернутый в компонент, который скрыт v-if, Когда пользователь нажимает кнопку, он переключает логическое значение, открывая скрытый компонент, и когда это происходит, я хотел бы перенести фокус на первый ввод формы во фрагменте.

Я пытался использовать aria-live но безрезультатно. Я подозреваю, что природа SPA мешает регистрации этих живых регионов (я предполагаю, что они должны быть зарегистрированы при визуализации страницы, так как они не кажутся отзывчивыми при вводе в DOM). Однако я не гонялся за ответом по кроличьей норе, так что это умозрительно. Затем я добавил класс к целевому вводу и попытался использовать HTMLElement.focus()

document.querySelector('.focus')[0].focus();

Это тоже не сработало. Кто-нибудь знает причину, по которой я не могу сосредоточиться на элементе, который недавно был внедрен в DOM и который виден на странице в то время?

Answer 1

Я думаю, что нужно, чтобы ваш компонент формы определил что-то, когда это mounted:

Vue.config.productionTip = false;
const template = `<div>
    <div>
      <inner v-if="showInner" />   
      <button @click="toggle">Toggle inner component</button>
    </div>
</div>`
const inner = {
  name: 'inner',
  template: '<form><input ref="textInput" type="text"/></form>',
  mounted() {
    this.$refs.textInput.focus()
  }
};
new Vue({
  template,
  data: function() {
    return {
      showInner: false
    };
  },
  methods: {
    toggle() {
      this.showInner = !this.showInner;
    }
  },
  components: {
    inner
  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>