Vue项目中使用vuetify-google-autocomplete遇多类报错求助

Let’s work through each of your problems step by step with concrete fixes:

1. Resolving Missing Required Props (googleApiKey and value) #

The <VuetifyGoogleAutocomplete> component depends on these two props to function—they aren’t optional. Here’s how to add them properly in your AddRestaurant.vue file:

First, define reactive variables in your component’s data section:

export default {
  data() {
    return {
      selectedAddress: '', // Will store the user's selected address
      // Use environment variables in production to keep your key secure!
      googleApiKey: 'YOUR_ACTUAL_GOOGLE_API_KEY'
    }
  },
  // ... rest of your component logic
}

Then pass these props directly to the autocomplete component:

<vuetify-google-autocomplete
  :google-api-key="googleApiKey"
  :value="selectedAddress"
  @placechanged="onPlaceSelected"
  // Add any other props/events your app needs
/>

Pro tip: Never hardcode API keys in production code—use tools like .env files to inject them as environment variables (e.g., process.env.VUE_APP_GOOGLE_API_KEY).

2. Fixing Google Maps API Duplicate Load & NoApiKeys Warnings #

These errors stem from either the API being loaded twice, or the component not receiving your key correctly. Here are two reliable fixes:

Option A: Let the component handle API loading #

If you haven’t manually added the Google Maps script to your project, keep the component’s auto-loading enabled (this is default) and ensure your googleApiKey prop is correctly passed. The component will load the API once with your key, eliminating duplicates.

Option B: Manually load the API once (disable component auto-loading) #

If you prefer to control the API load yourself:

1. Add the script to your public/index.html (include your key and the required places library):

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

2. Disable the component’s auto-loading by setting this prop:

<vuetify-google-autocomplete
  :google-api-key="googleApiKey"
  :value="selectedAddress"
  :load-google-maps-api="false"
  // ... other props
/>

Critical Final Checks: #

• Scan your entire project to ensure you haven’t added the Google Maps script anywhere else (duplicate scripts cause the "multiple times" warning).
• Confirm your API key is valid and has the Places API enabled in the Google Cloud Console. The "NoApiKeys" warning often pops up if your key is disabled, restricted incorrectly, or the Places API isn’t turned on.

After implementing these changes, all three warnings should vanish. Test the autocomplete component to confirm it works as expected!

内容的提问来源于stack exchange，提问作者Dror Uri