如何在 vue.js sfc 根元素可见后将焦点设置到它（v-show 已切换）

Question

我有一个侧边导航组件，默认使用 v-show 隐藏。

外部组件中的点击事件在 vuex 中设置了一个标志以切换侧边导航。

侧边导航组件的根 div 显示后如何将焦点设置到它？

我正在尝试使用此隐藏侧边导航

Answer 1

也许是这样的：

export default {
  watch: {
    someVarFromVuex(value) {
      // Don't focus unless the value got switched on
      if (!value) return;

      // Make sure to add the ref to your template.
      // You could also use an id.
      const $input = this.$refs.input.$el;

      // Just in case the input somehow doesn't exist...
      if ($input) {
         this.$nextTick(() => {
           $input.focus();
        })
      } 
    },
  },
};

请注意，如果您实际上是在尝试聚焦 div，那么它需要有一个 tabindex。

如何在 vue.js sfc 根元素可见后将焦点设置到它（v-show 已切换）

How to set focus to a vue.js sfc root-element once it is visible (v-show is toggled)

focus

vue.js