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
rlouie
December 6, 2020, 10:45pm
2
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
did you try this? Specifically, importing the ionic components?
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?
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
donpuerto:
<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
}
}
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()