0

我有一个表单片段包裹在一个被隐藏的组件中v-if。当用户单击一个按钮时，它会切换布尔值，显示隐藏的组件，当这种情况发生时，我想将焦点转移到片段上的第一个表单输入。

我试过用aria-live没用。我怀疑 SPA 的性质会干扰这些活动区域的注册（这意味着我的猜测是必须在呈现页面时注册它们，因为它们在注入 DOM 时似乎没有响应）。然而，我没有将答案追到一个兔子洞里，所以这是推测性的。所以我在目标输入中添加了一个类并尝试使用HTMLElement.focus()

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

这也没有奏效。有谁知道为什么我似乎无法专注于最近注入 DOM 并且当时在页面上可见的元素？

4

1 回答 1

0

我认为您的表单组件需要在以下情况下定义一些内容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>

于 2019-08-01T14:23:38.483 回答