已编辑 ：阅读 @Ali Bahrami 的回答后

我在 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>

稍后，我想在 <vue-google-autocomplete> 中显示我保存在数据库中的地址（例如 1 Bloor Street, Toronto'）。但是，我无法这样做。我在 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
        );

    });

这是我在控制台中看到的输出：

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: Cannot set properties of null (setting 'value') at Proxy. 令人惊讶的是，当我在控制台中使用相同的命令时，它可以工作并更新 vue-auto-complete 文本框。 同样，我收到 this.$refs["autoCompleteAddress"].update('1 Bloor Street, Toronto') 的错误“Uncaught TypeError: 无法读取未定义的属性（读取“update”）”。而且，令人惊讶的是，此命令在控制台中也能正常工作。

出于测试目的，我尝试在 1000 毫秒后更新“location”，但仍然失败。

我很困惑 - 为什么 if (location) 会失败，我无法更改 location.value ，尽管它在控制台中可以正常工作。

有什么建议，如何解决这个问题？ 提前致谢。