this.$refs.someUserDefinedRef.$el becomes null the second time it is used

Hi Franck,

I’m still enjoying your library !

I noticed that if I define a ref for a child component. For example:

<template>
  ...
  <hiddenFileInput
    ref="filesInput"
    @loadedFiles="storeAttachments"
  ></hiddenFileInput>
...
<template>

and use it in a method, for example:

<scripts>
  ...
  methods: {
    selectAttachments() {
      this.$refs.filesInput.$el.click();
    },
  },
  ...
</scripts>

Then the second time the method is called, I get this error:

Uncaught TypeError: this.$refs.filesInput is null
    selectAttachments https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.2.21/dist/vue3-sfc-loader.js line 22 > Function:63
...

It seems like I lose the reference, although the child component still exists. So I ended up storing the ref in a data on the first call like so:

<scripts>
  ...
  data() {
    return {
      refFileInput: null,
    };
  },
  ...
  methods: {
    selectAttachments() {
      if (!this.refFileInput) {
        this.refFileInput = this.$refs.filesInput.$el;
      }
      this.refFileInput.click();
    },
  },
  ...
</scripts>

But isn’t it a bug ? Or is there something I don’t understand or do right ? As a side note is using a ref the right way to reference a child component ?

Thank you for your help,

Merci

Raphaël

[raphael-bresson]

Sorry, I totally forgot to answer you. I was indeed wondering a few days ago if I had done it. Thank you for your answer. Indeed using loadModule only when mounting my App, on my main component, and using the standard import statement worked and solved my problem. I don’t know why I was repeatedly using loadModule. I must have got confused somewhere.

Anyway thanks again and you can close this issue.

Raphael

[FranckFreiburger]

what news?