Solution for Autocomplete custom input element without any depenedencies

[TrendyTim]

Before i figure out about how to go about doing pull requests and all that, what do people think about this as a solution

Its partially breaking because i have to wrap it in a span because VUE does not like the possibility of multiple root elements (if anyone has a better solution im open ... perhaps it would be better to add a 2nd component as not to break other peoples implementations and just modify and reuse implementation JS ).

Using a scoped named slot, i pass the $attrs and $listeners to the scope, keeping input as the default

Autocomplete.vue template section

<template> <span><slot name="input" v-bind:attrs="$attrs" v-bind:listeners="$listeners"> <input ref="input" v-bind="$attrs" v-on="$listeners" /> </slot> </span> </template>

Then in autocompleteImpl.js at start of mounted method (below var _this = this ) //if the input scope was replaced get the $refs.input from it if (_this.$scopedSlots.input) { var scopedInput = _this.$scopedSlots.input()[0].context.$refs.input //if we are using vuetify's textfield element we need to go deeper if (scopedInput && scopedInput.hasOwnProperty("$refs")) { scopedInput = scopedInput.$refs.input //get vuetify's html input element } if (scopedInput) { _this.$refs.input = scopedInput } //we have it use it }

Then the consumer can use

<gmap-autocomplete @place_changed="processLocationChanged" placeholder="Location Of Event" class="introInput"> <template v-slot:input="slotProps"> <v-text-field outlined prepend-inner-icon="place" placeholder="Location" ref="input" v-on:listeners="slotProps.listeners" v-on:attrs="slotProps.attrs"></v-text-field> </template> </gmap-autocomplete>

I made the slots in the Vue 2.6 format although i assume it should still work in the old deprecated slot style.

I think we could also probably make the 2nd level ref name a property instead of hardcoding to input, that could then support any framework.

If anyone wants to add it and do a PR (or @xkjyeah if you want to just throw it in there) be my guest just post here so i know not to bother figuring it out over the next few days.

[TrendyTim]

I added a pull request #659 that adds the functionality and removes the if not using the slot, hopefully it will get accepted.

[boxtesign]

@TrendyTim I am having some issues with accessing the places data. Could you please have a look ? here the issue: https://github.com/xkjyeah/vue-google-maps/issues/744