编辑：阅读完@Ali Bahrami的asnwer

我在Vue 3项目中使用vue-google-autocomplete。它工作正常，提供地址，并允许我选择一个地址，我能够挑选选定的，并保存到数据库。这是<vue-google-autocomplete>的代码

<vue-google-autocomplete
    ref="autoCompleteAddress"
    id="location"
    classname="form-control"
    placeholder="Location"
    v-on:placechanged="getAddressData"
    country="ca"
 >
 </vue-google-autocomplete>

字符串
稍后，我想显示我保存在数据库中的地址（例如：1 Bloor Street，Toronto'）in the <vue-google-autocomplete> .但是，我不能这样做。我在mounted（）中尝试了以下代码。（我使用选项API）

this.$nextTick(() => {
        let location = document.getElementById("location");
        console.log("typeof location " + typeof location);
        // It enters 'else'
        if (location) {
            location.value = "1 Bloor Street, Toronto";
        } else {
            console.log("location does not exist 0 ");
        }

        if (typeof location === 'object') {
           // location.value = "1 Bloor Street, Toronto";
           // Results in error: Uncaught TypeError: Cannot set properties of null (setting 'value')
        } else {
            console.log("location does not exist 1");
        }

        console.log(typeof this.$refs["autoCompleteAddress"]);
        if (this.$refs["autoCompleteAddress"]) {
            this.$refs["autoCompleteAddress"].update(
                "1 Bloor Street, Toronto"
            );
        } else {
            console.log('this.$refs["autoCompleteAddress"] does not exits');
        }
        // For testing 
        setTimeout(
            function () {
                let location = document.getElementById("location");
                console.log("typeof location in setTimeout" + typeof location);
                if (location) {
                    location.value = "1 Bloor Street, Toronto";
                } else {
                    console.log("location does not exist in setTimeout");
                }
            }.bind(this),
            1000
        );

    });

型
这是我在console中看到的输出：

typeof location object
location does not exist 0 
undefined
this.$refs["autoCompleteAddress"] does not exits
typeof location in setTimeoutobject
location does not exist in setTimeout

型
令人惊讶的是，第一个if的真实测试失败了（if (location)）。如果我强制document.getElementById("location").value = '1 Bloor Street, Toronto';命令显示错误：**createEvent.vue：545 Uncaught TypeError：无法在代理上设置null属性（设置'value'）。**令人惊讶的是，当我在控制台中使用相同的命令时，它可以工作并更新vue-auto-complete文本框。类似地，我得到错误“Uncaught TypeError：Cannot read properties of undefined（阅读'update'）”for this.$refs["autoCompleteAddress"].update('1 Bloor Street, Toronto') .而且，令人惊讶的是，这个命令也可以在控制台中工作。
为了测试的目的，我尝试更新'位置'后1000米秒，然而，它仍然失败.
我很困惑--为什么if (location)失败，我无法更改location.value，尽管它在控制台中工作。
任何建议，如何解决这个问题？先谢了。