Autocomplete only working while `gulp watch` active

[ethanclevenger91]

I'm developing on a homestead box and using Laravel Elixir. While using gulp watch and localhost:3000, the autocomplete functions just fine. However, if I simply navigate to the dev URL, the autocomplete doesn't work.

Futhermore, if watch is active and I load localhost:3000, then utilize the autocomplete and select a location, then go back to the command prompt and quit the watch, clicking into the autocomplete box again w/o refreshing the page gives me a dropdown with only the current value as an option. New options aren't generated.

[zashton]

@ethanclevenger91

Hi could you share your source code? Im using laravel too, have issues getting the autocomplete to work.

My problem seems to be the google places library is not loading.

[xkjyeah]

Does the problem occur when you are not watching?

I suspect there might be funny interactions between the Google Maps library, Vue and the hot reload API. All manipulate the DOM. Google Maps Autocomplete touches the DOM to create the menu elements; but Vue makes the assumption that no-one else manipulates the DOM; the hot reload API, I assume clears out the DOM every time there is an update. Since I don't have a working copy, I can't debug.

[ethanclevenger91]

Right, the problem is when I'm not watching. During gulp watch on localhost:3000 (BrowserSync is active), everything works as expected.

Component:

<div class="form-group">
    <label :for="label + 'Directions'">{{ label }}</label>
    <gmap-autocomplete ref="input" :value="value" @place_changed="updateValue" class="form-control" :id="label + 'Directions'"></place-input>
    <p v-if="help" class="form-text">{{ help }}</p>
  </div>

And gulpfile.js:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');
require('elixir-tinypng');
var env = require('./env.json');

elixir((mix) => {
    // some other stuff here
    mix.copy('node_modules/font-awesome/fonts', 'public/fonts')
     .sass('app.scss')
     .webpack('main.js')
     .browserSync({
        proxy: 'mysite.dev'
     });
});

Anything there look out of place?

[awitherow]

@ethanclevenger91 are you still experiencing this issue?

[ethanclevenger91]

Sure am, haven't really had a chance to debug. To be honest, not even sure where to start...

[awitherow]

@ethanclevenger91 me either, would be nice if @xkjyeah could give some pointers on where to look into? I don't have much experience with elixer. Maybe @ethanclevenger91 you could escalate this bug into laravel/elixer and get attention from some people that might have an idea?

[ethanclevenger91]

@awitherow Updated to the latest Vue, which started giving me some extra linting warning I wasn't seeing before. Turned out I didn't have a closing tag on the autocomplete (or the right tag, anyway). You can see it in my pasted code above. Updated that and everything is fixed!

[ethanclevenger91]

I take that back, still bugging.

[ethanclevenger91]

Make sure you have this API enabled for your key in addition to the JS one: https://console.developers.google.com/apis/api/places_backend

[diegoazh]

This issue is solved?