launch method after child component has been rendered

Question

I'm using a v-if in my parent to conditional render a child component. Even when the child should not render the mounted function still gets executed and results in an error in console.

How does one makes sure the child component is rendered when launching a method when the child component is rendered.

In my case I'm using an autofocus:

mounted: function () {
        // Autofocus input on load.
        this.$nextTick(() => this.$refs.input.focus());
    },

Error in nextTick: "TypeError: _this.$refs.input is undefined"

console.log(this.$refs.input) gives the object:

<input class="form-control" data-v-661f7e55="" type="text" autocomplete="off">

Answer 1

Try this.

<input class="form-control" ref="input" type="text" autocomplete="off">

mounted(){
      this.$nextTick(() => this.$refs.input.focus())
    }

This is working fine for me.ref is used to register a reference to an element or a child component.