The $refs maybe undefined

Version

2.6.10

Reproduction link

https://codesandbox.io/embed/3q34mqqwxm

Steps to reproduce

1. In the template not ref use.
2. In the ts use readonly $refs!: { div: Element };
3. In the runtime this.div.xx will throw error.

What is expected?

Throw error in compiler-time.

What is actually happening?

Throw error in runtime.

---

we can use readonly $refs!: { div: Element | undefined }; and this.div!.xx .

[juliussa]

In my case.

<template>
<div>
    ...
    <application-gateway
      v-if="data && vccCredit"
      :flowData="data"
      :vccCredit="vccCredit"
      :vccPartners="vccPartners"
      ref="applicationGateway"
    >
    </application-gateway>
    ...
</div>
</template>

<script>
  async applyNowHandler() {
    const applicationGateway = this.$refs.applicationGateway as any
    // prevent amazing Cannot read property 'start' of undefined
    this.$nextTick(() => {
      applicationGateway.start()
    })
  }
</script>

I promise add loading when fetching data and vccCredit. And add the $nextTick.

But applicationGateway ref still be undefined in some case.

I don’t know why?

May be we need change the $ref define in types/vue.d.ts.

https://cn.vuejs.org/v2/api/#ref

@underfin , support you.

Do you try to use v-show instead v-if?

[LinusBorg]

@underfin I fail to see what you think wrong about the behaviour you are showing. There’s no element to reference, so $refs is empty.

It seems you think you should be able to overwrite $refs with a permanent value. That’s not the case. $refs is created dynamically during runtime, and will always only contain the refs that are currently found in the document.

@HyunmoAhn Your problem seems unrelated. The <!-- --> comment in the page’s markup indicates that you have a render error, which is why there’s no ref: Because of the render error, no element was created, so there’s no element for the ref to reference.