[Vue warn]：安装钩子时出错：“ReferenceError：google未定义”

Question

我正在尝试使用此链接实现 Google 自动完成功能：

https://www.npmjs.com/package/vue-google-autocomplete

但我收到此错误：

VM2823 app.js:62045 [Vue warn]: Error in mounted hook:
"ReferenceError: google is not defined"
     
    found in
     
    ---> <VueGoogleAutocomplete> at node_modules/vue-google-autocomplete/src/VueGoogleAutocomplete.vue
           <user> at resources/js/components/addUser.vue
             <Root>

<template>
    <div>
        <h2>Your Address</h2> 
        <vue-google-autocomplete
            ref="address"
            id="map"
            classname="form-control"
            placeholder="Please type your address"
            v-on:placechanged="getAddressData"
            country="sg"
        >
        </vue-google-autocomplete>
    </div>
</template>
     
<script>
import VueGoogleAutocomplete from 'vue-google-autocomplete'
     
export default {
    components: { VueGoogleAutocomplete },
 
    data: function () {
        return {
            address: ''
        }
    },
     
    mounted() {   
        this.$refs.address.focus();
    },
     
    methods: {       
        getAddressData: function (addressData, placeResultData, id) {
            this.address = addressData;
        }
    }
}
</script> 

请帮忙解决我的问题。

Answer 1

查看此解决方案，https://github.com/olefirenko/vue-google-autocomplete/issues/100#issuecomment-534916647

基本上你必须用

<vue-google-autocomplete>

标签

 包裹 

<no-ssr>

并在

nuxt.config.js

文件中添加CDN链接

head: {
...
script: [
      {
        src: 'https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places'
      }
    ]
...
}