vue-google-maps icon indicating copy to clipboard operation
vue-google-maps copied to clipboard

PlaceInput reset

Open smartpierre opened this issue 8 years ago • 6 comments

Hi !

As mentioned in the documentation, the value of the 'place' property in the PlaceInput component is writable but it is ignored. I there anyway I could "reset" the PlaceInput ? Without having to reload the page...

Thanks !

smartpierre avatar Jun 01 '16 14:06 smartpierre

I could make it write enabled. Do you think it would be a good idea ?

GuillaumeLeclerc avatar Jun 01 '16 14:06 GuillaumeLeclerc

That would solve my problems, here is my case :

The users have a map and they add a 'place' to my database either by using the PlaceInput to search for an address OR by placing a pin on the map. When a pin is placed on the map I reverse geocode it and I want to show the address inside the PlaceInput (so there is no confusion for the user).

Also, they can add as many 'places' they want :

When they submit the form to my API to add a 'place' I would like to clear the address in the PlaceInput so they can add another 'place' without having the address of the previous already typed in.

I hope it's clear enough.

smartpierre avatar Jun 01 '16 15:06 smartpierre

Yes it's super clear. I'll try to do it. But if you want a PR would be welcome :)

GuillaumeLeclerc avatar Jun 01 '16 20:06 GuillaumeLeclerc

Im doing something similar with my app. Users can lookup a place, which then appears on map, or they can click on map and place is reverse-geocoded and inserted into place. That also happens if user updates their listing. Dragging the marker also updates everything, including place input and address.

To reset "place" I do the following:

<place-input :types="['address']"
    :place.sync="place"
    v-ref:gplaceinput
    :select-first-on-enter="true"
>
</place-input>

Then I have a method which triggers from an event:

resetAutocomplete() {
            // wipe out place prop...
            this.place = {
                name: ''
            };

            // remove input from place input
            $(this.$refs.gplaceinput.$el).find('input').val('');
        },

Works perfectly.

leeovery avatar Jun 27 '16 09:06 leeovery

@leeovery Thank you for that, I will try :)

smartpierre avatar Jul 01 '16 09:07 smartpierre

Making this property writable would also benefit people using a Vuex-style pattern. The store can be updated from watching the place property, and that can then trickle back down.

ethanclevenger91 avatar Oct 25 '16 21:10 ethanclevenger91