[ERROR] An error occurred when using $refs between ion-input file with ion-button

Ionic Framework Ionic Vue
1

Hello.
from yesterday I made ion-input with type=“file” and ref with inputFile.

<ion-input type="file" ref="inputFile />

and I bind this ref to ion-button, so all the code will look like this:

    <ion-list>
      <ion-item>
        <ion-label id="next_profile_image" color="dark" stacked>Pick a next Image: </ion-label>
        <ion-input type="file" accept="image/*" id="upload" 
        @change="imageInputFile($event)" ref="inputFile" hidden />

        <ion-button slot="end" color="warning" @click="$refs.inputFile.click()">Upload Image</ion-button>
      </ion-item>
    </ion-list>

when I clicked that button to open the local file, I got the errors like this:

image
image862×350 17.2 KB

So, I transfer the different ways to change the style of the input file button with generating HTML, not ionic tag. “$refs” is working perfectly well.

all the code will look like this:

image
image899×189 28.5 KB

2

Did you import IonInput from @ionic/vue and provide it to your Vue component? It looks like you are just getting the non-Vue Web Component.

3

Yes, I already import “IonInput”. In devtool no any warning said:
“[Vue warn]: Failed to resolve component: ion-input”

4

Try this troubleshooting guide: https://ionicframework.com/docs/vue/troubleshooting#failed-to-resolve-component

If it still does not work, please provide a code reproduction of the issue. Otherwise it is going to be hard to pinpoint what the issue may be.

1 Like
5

Thank you for your answer and help me. I will try to test it, hope the docs able to figure out the point to fix the bugs.

Ciao

6

I figured out how to solve this problem.

A big thanks to the Ionic team for thoughtfully helping us ( vue developer ) “$Refs” by using:

getInputElement()

refs to any ion-button we wanna bind or reference.

the solution will look like this:

    <ion-list>
      <ion-item>
        <ion-label id="next_profile_image" color="dark" stacked>Pick a next Image: </ion-label>
        <ion-input type="file" accept="image/*" id="upload" 
        @change="imageInputFile($event)" ref="inputFile" hidden />

        <ion-button slot="end" color="warning" @click="OpenImageFile">Upload Image</ion-button>
      </ion-item>
    </ion-list>

setup() {
    const inputFile = ref(null)

    const OpenImageFile = () => {
      inputFile.value.$el.getInputElement().then((e) => {
        e.click();
      })
    }

   return { inputFile, OpenImageFile }

}