vuejs ref is undefined when importing component with lazy loading

Question

I'm trying to import a component like this for lazy loading:

components: {SizeChartForm:() => import("@/core/components/size/SizeChartForm/SizeChartForm")},

I'm having a ref to SizeChartForm component:

<SizeChartForm ref="sizeChart" v-model="value" />

and trying to use it in the mounted:

mounted() {
    this.$refs.sizeChart.setDisabled(false)
}

but it says sizeChart is undefined. Even $nextTick is not working.

But when I use normal import it works:

import SizeChartForm from "@/core/components/size/SizeChartForm/SizeChartForm";
  
components: {SizeChartForm}

Vue version: 2.6.11

Which Vue version are you using?

DannyFeliz
– DannyFeliz

2021-07-27 22:38:20 +00:00
Commented Jul 27, 2021 at 22:38 — DannyFeliz
– DannyFeliz, Commented Jul 27, 2021 at 22:38
@DannyFeliz 2.6.11

Parsa_Gholipour
– Parsa_Gholipour

2021-07-28 05:15:17 +00:00
Commented Jul 28, 2021 at 5:15 — Parsa_Gholipour
– Parsa_Gholipour, Commented Jul 28, 2021 at 5:15

tony19 · Accepted Answer · 2022-09-06 19:19:50Z

$nextTick is not enough - it takes much longer to load an async component.

Generally if you need to do some work when the child component is mounted, you should do it in child's mounted hook, not in parent's (docs - "Note that mounted does not guarantee that all child components have also been mounted.").

Solution 1 (only for Vue 2)

If moving the code to the child is not an option, you can use the (little documented) fact that Vue 2 lifecycle emits special events like hook:mounted for each lifecycle stage and those events can be listened in the parent: <child ref="child" @hook:mounted="onAsyncComponentMounted"></child>

Solution 2 (Vue 2 & Vue 3)

Those events were removed in Vue 3 (I'm unable to find any documentation or anything in the migration guide but I'v tested and it doesn't work) so the best approach seems to emit some custom event from the child's mounted hook and listen for it in the parent (see second example)

Update

I found this tweet from the Vue core team member Damian Dulisz explaining (see the replies) that hook:xxx events are not considered public API and are not documented intentionally. So from this POV and also considering it's removal in Vue 3, use the second solution...

Vue 2

// NOTE: this works only in Vue 2, not in Vue 3!
const child = {
  template: `
  <div>
    <input ref="input" type="text" />
  </div>
  `
}

// to simulate component async loading in browser env.
const loadComponentAsync = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => resolve(child), 2000);
  })
}

const app = new Vue({
  el: '#app',
  components: {
    'child': () => loadComponentAsync()
  },
  methods: {
    onAsyncComponentMounted() {
      console.log(this.$refs.child.$refs.input)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id='app'>
  <child ref="child" @hook:mounted="onAsyncComponentMounted"></child>
</div>

Vue 3

const child = {
  template: `
  <div>
    <input ref="input" type="text" />
  </div>
  `,
  mounted() {
    this.$emit('child-mounted')
  }
}

const loadComponentAsync = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => resolve(child), 2000);
  })
}

const app = Vue.createApp({
  components: {
    'child': Vue.defineAsyncComponent(() => loadComponentAsync())
  },
  methods: {
    onAsyncComponentMounted() {
      console.log(this.$refs.child.$refs.input)
    }
  }
}).mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <child ref="child" @child-mounted="onAsyncComponentMounted"></child>
</div>

Collectives™ on Stack Overflow

vuejs ref is undefined when importing component with lazy loading

1 Answer 1

Solution 1 (only for Vue 2)

Solution 2 (Vue 2 & Vue 3)

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution 1 (only for Vue 2)

Solution 2 (Vue 2 & Vue 3)

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related