子组件渲染后的启动方法

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.