CODEWITHSUNDEEP
javascriptvue.jslifecycle
Halfacht
Halfacht

Reputation: 1024

launch method after child component has been rendered

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">

Upvotes: 1

Views: 133

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

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.

Upvotes: 1

Related Questions