gocanto / google-autocomplete Goto Github PK

This is wrong.

 if (Object.keys(paypload.place).length > 0) {
                this.address = payload.address;
                this.response = payload.response;
}

Awesome package. But how would I pull this in through npm?

Hi Thank you for the great work!!
I just installed the latest version with npm, but the following error occurred:

Module not found: Error: Can't resolve './../Libraries/Autocomplete' in '/path/node_modules/google-autocomplete-
vue/dist/Components'

I guess there is no Libraries/* in the compiled package? :)
Thank you!

Is there a workaround for this issue it is a problem in the Autocomplete.js file line 127

Dear Gustavo,

Can you please add Store.js to the src and compile it to dist?

Thanks.

Hi!

Great package!

Just a quick question. I am placing the component inside another component. Is there a way to access the place data from within the parent?

I using single file vue files with webpack.

<template>
<google-autocomplete
                                  class = "form-control inputbox"
                                  input_id = "txtAutocomplete"
                                  :config = "{type: ['geocode']}"
                                  placeholder = "Address"
                                >
                                </google-autocomplete>
</template>

<script>

logic here 

</script>

Looking for examples, yet the file has since been removed.

Hey,

Thanks for the component. But the results are under my modal and I cant seem to find a easy way to fix this. Especially since the auto complete does something in the head and I dont understand what it does.

Could you help me out here please ?

Greetings,

I know this may be outside of the scope of this project but I would really appreciate any insight

I've got this autocomplete working perfectly but I'm trying to use it on the same page as a map that's using this

https://www.npmjs.com/package/vue2-google-maps

Got the map working on its own as well but if I try to use both I get the dreaded

"You have included the Google Maps API multiple times" error

I could perhaps get around this by using the map inside an iframe, but then my other problem is that while the map initializes the api inside a .vue component, this plugin requires that the initialization be in the bootstrap.js, so even if I'm on a page that only uses one of the two plugins, it still initializes twice and throws the error.

How can I have it so that it only initializes the api on pages where the component is actually used?

Even better though would be for a solution for using both on the same page

Thanks!!

$ npm install vuemit --save
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink

Value is not bind to v-model mentioned with the directive??

First of all I like the simplicity of this package. I know you are using larave-elixir but wanted to see if you know what would be causing this issue with Laravel Mix. When I compile using the production flag
npm run production
I get the following error
/js/app.js from UglifyJs SyntaxError: Unexpected token: name (Autocomplete) [./~/google-autocomplete-vue/dist/Libraries/Autocomplete.js:11,0][/js/app.js:26241,6]

When I search location and auto complete, what field are you filling?
Is it formatted address? or location name + formatted address?
I am sharing my screen.

import Store from 'google-autocomplete-vue/dist/Store';
import Components from 'google-autocomplete-vue';

Adding to my entry point, get this error:

Store.js?d42d:8 Uncaught SyntaxError: Unexpected token import
    at Object.<anonymous> (app.js:2449)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:1788), <anonymous>:19:14)
    at Object.<anonymous> (app.js:1788)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at Object.<anonymous> (app.js:587)
    at __webpack_require__ (app.js:556)
    at app.js:579

I am getting an error while incorporating this into a fresh Laravel 5.3 install.

[vuex] already installed. Vue.use(Vuex) should be called only once.
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
[Vue warn]: Error when evaluating expression "function sharedAddress() {
            return _Store2.default.state.sharedAddress;
        }": TypeError: Cannot read property 'sharedAddress' of undefined (found in component: <example>)

In the example component I have:

<template>
    <google-autocomplete
        class = "input"
        placeholder = "type your address"
    >
    </google-autocomplete>
</template>

<script>
    import Store from 'google-autocomplete-vue/dist/Store';
    import Components from 'google-autocomplete-vue';

    console.log(Store);
    export default {
        ready() {
            console.log('Component ready.')
        },
        data: {
            output: {}, address: {}, sent: false
        },

        computed:{
            sharedAddress: function(){
                return Store.state.sharedAddress;
            }
        },

        watch: {
            sharedAddress: function (){
                this.address = this.sharedAddress;
            }
        },

        methods:{
            submit: function (){
                this.sent = true;
                this.output = this.address;
                this.address = {};
            },
            isValid: function (){
                return Object.keys(this.output).length > 0;
            },
            isNotValid: function (){
                return ! this.isValid();
            }
        }
    }
</script>

I reference the example component in home.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <example></example>
        </div>
    </div>
</div>
@endsection

For dependencies in package.json:

"dependencies": {
    "google-autocomplete-vue": "^1.0.12",
    "vue": "^1.0.28",
    "vuex": "^2.1.1"
  }

Is there any way I can use this package without the use of webpack ?

[Vue warn]: "class" is a reserved attribute and cannot be used as component prop.

found in

---> at node_modules/google-autocomplete-vue/dist/Components/googleAutocomplete.vue

Hi Gocanto

Thanks for your great google autocomplete which is extremely easy to implement.

I noticed that there was one thing missing though (street_number) which is returned by the API.

I could implement it easily on my project but for the benefits of others I think this would be a great improvement for your vue wrapper.

Have a great day and thanks again !

I am just wondering how to have multiple instances of the component?
Currently it could not render more than one and it does not throw any error!