Как установить фокус на корневой элемент vue.js sfc, как только он виден (v-show переключается)

Question

У меня есть компонент боковой навигации, который по умолчанию скрыт с помощью v-show.

Событие щелчка во внешнем компоненте устанавливает флаг в vuex для переключения боковой навигации.

Как установить фокус на корень боковой навигационной компоненты div, как только онотображается

1009 * Я пытаюсь использовать эту технику фокусировки на фокусировке , чтобы скрыть боковую навигацию

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.