0

我是 Vue js 的新手，在用户开始输入并从下拉菜单中选择地址后，我正在尝试使用自动完成 API 自动填充表单中的地址字段。文档中的代码使用 Vanilla javascript，我想将其转换为 Vue js 并将其集成到我现有的表单中。

在我的数据中，我有一个名为 employeesProfileData 的对象，我使用 v-model 在我的表单输入中使用它。

data() {
            return {

                employerProfileData: {
                    company_name: '',
                    phone: '',
                    number_of_employees: '1-25',
                    options: [
                        { value: '1-25', text: '1-25' },
                        { value: '25-50', text: '25-50' },
                        { value: '50-100', text: '50-100' },
                        { value: '100-250', text: '100-250' },
                        { value: '250-500', text: '250-500'},
                        { value: '500-1000', text: '500-1000'}
                    ],
                    street: '',
                    city: '',
                    country: 'Canada',
                    optionsTwo: [
                        { value: 'Canada', text: 'Canada' },
                        { value: 'United States', text: 'United States' }
                    ],
                    province_state: '',
                    zip_postal: '',
                },

                errors: {},

            };

现在，我正在像这样从自动完成对象中获取地点详细信息const place = autocomplete.getPlace();。现在，我可以像这样访问 address_componentplace.address_components来获取我想要分配给我的输入字段的值，就像这样。

mounted() {

            const autocomplete = new google.maps.places.Autocomplete(
                document.getElementById("autocomplete"),
                {
                    bounds: new google.maps.LatLngBounds(
                        new google.maps.LatLng(43.651070, -79.347015)
                    )
                });

            function fillInAddress() {

                // Get the place details from the autocomplete object.
                const place = autocomplete.getPlace();

                this.employerProfileData.street = place.address_components[0].short_name + place.address_components[1].long_name;
                this.employerProfileData.city = place.address_components[2].long_name;
                this.employerProfileData.country = place.address_components[5].long_name;
                this.employerProfileData.province_state = place.address_components[4].short_name;
                this.employerProfileData.zip_postal = place.address_components[6].short_name;

            }

            autocomplete.addListener("place_changed", fillInAddress);

        }

但似乎我无法在fillInAddress()函数中执行此操作，并且出现此错误：

TypeError: Cannot set property 'street' of undefined

------------ 更新了这个作品：------------

我需要bind.(this)在fillInAddress功能上。挂载（）{

            const autocomplete = new google.maps.places.Autocomplete(
                document.getElementById("autocomplete"),
                {
                    bounds: new google.maps.LatLngBounds(
                        new google.maps.LatLng(43.651070, -79.347015)
                    )
                });

            function fillInAddress() {

                // Get the place details from the autocomplete object.
                const place = autocomplete.getPlace();

                this.employerProfileData.street = place.address_components[0].short_name + place.address_components[1].long_name;
                this.employerProfileData.city = place.address_components[2].long_name;
                this.employerProfileData.country = place.address_components[5].long_name;
                this.employerProfileData.province_state = place.address_components[4].short_name;
                this.employerProfileData.zip_postal = place.address_components[6].short_name;

            }

            autocomplete.addListener("place_changed", fillInAddress.bind(this));

        },
4

1 回答 1

0

你可能会对vue-google-autocomplete包感兴趣。

示例用法：

<vue-google-autocomplete
  id="map"
  classname="form-control"
  placeholder="Start typing"
  v-on:placechanged="getAddressData"
/>

由于超过了每天免费请求的限制，它的演示今天无法运行，但它似乎是合法的。

如果你想自己做，我建议使用调试器检查this内部指向的内容。fillInAddress也许绑定上下文会有所帮助。

autocomplete.addListener("place_changed", fillInAddress.bind(this))
于 2020-06-02T19:00:16.143 回答