:placechanged not being triggered

[mwargan]

Just downloaded the Alpha4 version and see a breaking change that is causing :placechanged not to trigger.

<vuetify-google-autocomplete google-api-key="key" id="map" prepend-icon="location_on" label="Meeting location" types="address" value="test" :enable-geolocation="true" :placechanged="getAddressData"> </vuetify-google-autocomplete>

getAddressData(addressData, placeResultData, id) { console.log('something')}

Interestingly, Vue gives me a required-prop error if I don't specify a value...

[MadimetjaShika]

Oh geez yes, that is a breaking change. 🤦‍♂️

I think a v-model shouldn't be required by default due to the different ways this component can be used. So i'll change the component not to require the v-model value.

Thanks for noting that!!

PS - I really need to get tests sorted out on this component...

[mwargan]

Actually I'm not even getting results listed, even with a v-model. Not getting anything useful in the console - am going to look at the changes closer between this version and the previous one and see if I spot anything.

I'm just gonna throw in a quick thank you for staying on top of this and addressing my previous issues ;)

[MadimetjaShika]

You're most welcome mate! I've resolved the v-model issue with a new release. So the component should work as expected with or without the v-model prop.

Regarding the issue you just noted, that's odd, you shouldn't be observing that. How does your code look? As in how have you initialised and imported the component? I'm able to handle the placechanged event properly and observe the correct results with below as output.

[mwargan]

Huh... here's how I'm initialising the component:

import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: 'key',
});
Vue({
    el: '#admin',
VuetifyGoogleAutocomplete})

// then

<vuetify-google-autocomplete id="map" label="Meeting location" v-model="address" v-on:placechanged="getAddressData"></vuetify-google-autocomplete>

npm upgrade isn't pulling the newest version so I force it by npm i vuetify-google-autocomplete@2.0.0-Alpha.5 --save

In the console, all I see is Missing required prop: "value" but I think thats related to the address model initially being set to ''

When I try to downgrade with npm i vuetify-google-autocomplete@2.0.0-alpha.1.test.3 --save , it updates the package.json but it looks like its still the newest version since the :hint attribute is working...

[MadimetjaShika]

Hmm, try updating to v2.0.0-alpha.5 of the component. I think you might be getting that error due to the v-model issue, because in version v2.0.0-alpha.4 if it's not present the component won't load.

I have also created a very basic and minimal webpack example project where everything works as expected. So perhaps compare your code against that project to see what might be different.

PS - You also don't need the following lines (although having it shouldn't break anything)

Vue({
   ...
  VuetifyGoogleAutocomplete
   ...
})

The Vue.use is sufficient.

[MadimetjaShika]

Just noting the edits you made, you might want to delete your node_modules folder and clear your npm cache with npm cache clear --force, then try re-installing dependencies with verbose output (to see if anything goes wrong) and without cache using npm i -d --no-cache. You could possibly be facing some npm caching issues...

[mwargan]

Cloned and works great - I'll dig deeper on my end to see what's up.

Cache busting and folder deleting didn't help :/

So far I've figured out that it's using the API-key correctly and loading the component fine, just not loading the results...

What I don't get is why my current app creates a <script src="https://maps.googleapis.com/maps/api/js?key=...&amp;libraries=places&amp;callback=initGoogleMaps" async="" defer=""></script> while the clone generates 5 scripts all starting with https://maps.googleapis.com/maps-api-v3/api/js/32/2/... Any ideas?

Thanks again!

[MadimetjaShika]

Hmm that doesn't seem right. Your app is generating the correct and expected script, and if I run the example project I only see the one expected script that you also observer for your app, as below.

There must be something else causing that problem. Do you mind either sharing access to the codebase, or mimicking your code (also include any other dependencies you might be using alongside this one) on a branch on the example project (i've added you as a collaborator)? Then I can check that out.

[mwargan]

Sure - here's the codebase :) . The relevant files are in resources/assets/js, the main.js being resources/assets/js/app.js. I've also created a simple page that copy pasted your 'front-end' in resources/assets/js/pages/Area.vue - routed via resources/assets/js/router/index.js, though the component is usually used in the subject page.

I was thinking it could be something to do with the router, when calling render: h => h(App) the component works fine, but when it's routed through a router - the component still is rendered, but the results aren't listed; but I haven't added a router yet to your simple example to see if that's really the issue.

[MadimetjaShika]

So I just ran your app and everything runs perfectly okay, the "handlePlaceChangedEvent" callback gets called successfully.

The component also only creates one script tag for Google maps as expected.

So not too sure what the problem might be on your side. I think perhaps try a clean/fresh install of everything? So commit and push your changes then remove your local repo, and re-clone. Before installing anything, just clean/clear your composer cache and npm cache, then retry the installs. Oddly that's all I had to do to get it working.

Also, what tool versions do you have? Node, php, composer, etc? That could potentially be an issue as well (though highly unlikely IMO).

PS - Be sure to delete all the .php files in storage/framework/views. Laravel does cache views in that directory, so it is possible that you could have been running "stale" views. Laravel will re-generate these when you run your app.

[mwargan]

Huh - I didn't even think to check /admin#/area, I've been working on /public#/area - you're right it does work! Sorry for the troubles! This narrows down my problem :)!

[MadimetjaShika]

No worries mate, glad I could help ;)