How to use $refs and the Vue 3 Composition API?

Hi im trying to hook up using ref in ionic input, however it wont work?

<template>
    <input ref="testRef" />                            --> working
    <ion-input ref="testRef"></ion-input>  --> **NOT WORKING**
    -- any workaround using $ref, i am trying to use google map

</template>

<script>
import { onMounted, ref } from "vue"
export default {
  name: 'App',
  setup() {
    const testRef = ref(null)
    onMounted(() => {
         console.log(testRef.value);
    });
    return {
      testRef
    }
  }
}
</script>
```html

When you say not working, what happens? What is logged to console?

Also, I don’t see you importing and declaring the IonInput component here, if you haven’t done that, do that first and then try again?

Here’s the error:

InvalidValueError: not an instance of HTMLInputElement

here is a starter for a google maps solution in ionic vue: Ionic Vue Google Maps

also, a small sample project goes a long way when trying to debug an issue.

Wow, so cool thanks. Do you have any recommendation on how to hook up into <ion-input ref="testRef" />? Im trying to use the google autocomplete :slight_smile:

did you try this? Specifically, importing the ionic components?

Oh yes of course everything imported correctly. However this error occur.


So rather using ionic input I used the native and it works which is very awkward.

<ion-input ref="autocompleteRef" type="text"  placeholder="Enter your address" v-model="address"></ion-input>

setup(props) {
    const autocompleteRef = ref(null)
    onMounted(() => {
       console.log(autocompleteRef.value);
      let reference =document.getElementById("autocompleteRef")
      let options = {
        componentRestrictions: { country: 'us' },
        bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(7.207573, 125.395874)
        ),
      }
      let autocomplete = new google.maps.places.Autocomplete(reference,options)
    })

   return {
      autocompleteRef
   }

}

Try

$refs.refname.$el

That worked for me to find the element

Hi mate i stop it here… How to get into the input?

Here’s my code

onMounted(() => {
      console.log('autocomplete', autocompleteRef.value.$el)
      let reference =autocompleteRef.value.$el
      let options = {
        componentRestrictions: { country: 'ph' },
    
        bounds: new google.maps.LatLngBounds(
          new google.maps.LatLng(7.207573, 125.395874)
        ),
 
      }
      // console.log(autocompleteRef.value);
      let autocomplete = new google.maps.places.Autocomplete(reference,options)
    })

U need the child element, right? The ref takes u to the ionInput element

I think that should just be
let reference = autocompleteRef.value

How mate?

<ion-input ref="autocompleteRef" type="text"  placeholder="Enter your address" v-model="address"></ion-input>

setup(props) {
    const autocompleteRef = ref(null)
    onMounted(() => {
       console.log(autocompleteRef.value);
      let reference =document.getElementById("autocompleteRef")
      let options = {
        componentRestrictions: { country: 'us' },
        bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(7.207573, 125.395874)
        ),
      }
      let autocomplete = new google.maps.places.Autocomplete(reference,options)
    })

   return {
      autocompleteRef
   }

}

If anyone is still struggling with this I figured it out.

the docs documents a getInputElement() method.

ref() returns a reference to the Vue proxy object, you still need to call $el to get a direct reference to the ion-input element, which you can then call getInputElement() from.

So simple example:

<ion-input ref="autocompleteRef" type="text"  placeholder="Enter your address" v-model="address"></ion-input>

const autoCompleteRef = ref('autocompleteRef')

const ionInputEl = autoCompleteRef.value.$el

// get the native input (in async context)
const nativeInput = await ionInputEl.getInputElement()