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

Question

I have a side-nav component that is hidden by default using v-show.

A click event in an external component sets a flag in vuex to toggle the side-nav.

How can I set focus to the side-nav component's root div once it's displayed?

I am trying to use this focus-on focus-off technique to hide the side-nav

Answer 1

Maybe something like this:

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();
        })
      } 
    },
  },
};

Note that if you are actually trying to focus a div, then it will need to have a tabindex.