Vue3项目中vue-google-autocomplete组件无法更新值的问题

编辑说明：阅读@Ali Bahrami的回答后补充

我在Vue 3项目中使用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”）显示到该组件中，但无法实现。我在mounted()钩子中使用选项API尝试了以下代码：

this.$nextTick(() => {
    let location = document.getElementById("location");
    console.log("typeof location " + typeof location);
    // 进入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";
       // 报错：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');
    }
    // 测试用
    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.**但在控制台中执行相同命令却能成功更新组件输入框。

同样，执行this.$refs["autoCompleteAddress"].update('1 Bloor Street, Toronto')会报错“Uncaught TypeError: Cannot read properties of undefined (reading 'update')”，但在控制台执行该命令却有效。

我尝试延迟1000毫秒更新，但仍然失败。我感到困惑：为何if (location)判断不成立，无法修改location.value，但控制台中却可以？

恳请各位提供解决方案，谢谢！

解决方案建议 #

1. 等待组件的ready事件触发
   vue-google-autocomplete依赖Google Maps API，组件内部的DOM元素和实例可能在Vue的mounted钩子执行时还未被完全初始化。可以监听组件提供的ready事件，确保在组件准备就绪后再执行地址赋值：

<vue-google-autocomplete
    ref="autoCompleteAddress"
    id="location"
    classname="form-control"
    placeholder="Location"
    @placechanged="getAddressData"
    @ready="handleAutoCompleteReady"
    country="ca"
>
</vue-google-autocomplete>

methods: {
  handleAutoCompleteReady() {
    // 此时组件已完成初始化，调用update方法赋值
    this.$refs.autoCompleteAddress.update("1 Bloor Street, Toronto");
  }
}

2. 轮询检查组件实例是否可用
   如果组件未提供ready事件，可以通过轮询的方式等待组件实例就绪：

mounted() {
  const tryUpdateAddress = () => {
    const autoComplete = this.$refs.autoCompleteAddress;
    if (autoComplete && typeof autoComplete.update === 'function') {
      autoComplete.update("1 Bloor Street, Toronto");
    } else {
      // 每200ms检查一次，避免过度占用资源
      setTimeout(tryUpdateAddress, 200);
    }
  };
  tryUpdateAddress();
}

3. 避免直接操作DOM，优先使用组件API
   直接修改input的value属性会绕过组件内部的状态管理，可能导致组件和DOM不同步。始终优先使用组件提供的update方法来设置地址，这是官方推荐的方式。

4. 确认Google Maps API加载顺序
   确保Google Maps API脚本在Vue组件渲染之前完成加载。可以在index.html中同步加载Google Maps脚本，或者在组件中动态加载并等待其加载完成后再渲染组件：

mounted() {
  // 动态加载Google Maps API示例（需替换为你的API密钥）
  const script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places';
  script.onload = () => {
    // API加载完成后再尝试更新地址
    this.$nextTick(() => {
      this.$refs.autoCompleteAddress?.update("1 Bloor Street, Toronto");
    });
  };
  document.head.appendChild(script);
}

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