Как обработать подсказки Яндекс Карт SuggestView?

Question

[dicem]

Как получить данные подсказок и обработать их во Vue при условии, что я никак не могу обратиться к this.$data внутри provider.suggest да и вобще к контексту Vue ??

data() {
    return {
        dropdownIsOpened: false,
        SuggestView: null,
        bounds: {
            100000003:[ // Москва
                [55.142627, 36.803259],
                [56.021281, 37.967682]
            ],
            100000006:[ // Самара
                [53.091785, 49.731327],
                [53.550907, 50.390439]
            ],
            100000008:[ // Сочи
                [43.384759, 39.149676],
                [44.029925, 40.010388]
            ]
        },
        provider: {
            suggest: function (request, options) {
                delete options['provider'];
                return ymaps.suggest(request, options).then(items => {
                    let arrayResult = [];
                    let arrayPromises = [];

                    function pushGeoData(displayName, value, jsonData) {
                        arrayResult.push({displayName: displayName, value: value, jsonData: jsonData});
                    }

                    items.forEach(i => {
                        arrayPromises.push(ymaps.geocode(i.value).then(gc => {
                            let displayName = "";
                            let value = i.value;
                            if (!i.value.match(/.*подъезд.*/)) {
                                let geoObject = gc.geoObjects.get(0);

                                if (geoObject) {
                                    let jsonData = JSON.stringify({
                                        'city': geoObject.getLocalities()[0] || geoObject.getAdministrativeAreas()[0],
                                        'street': geoObject.getThoroughfare() || geoObject.getLocalities()[0],
                                        'house': geoObject.getPremiseNumber(),
                                    });

                                    if (geoObject.getCountryCode() == "RU") {
                                        value = value.replace(geoObject.getCountry()+", ", "");
                                        value = value.replace(geoObject.getAdministrativeAreas()[0]+", ", "");
                                        displayName = "<div class='yandex-map-address_info'>"+value+"</div><div class='yandex-map-localities_info'>"+geoObject.getCountry()+", "+geoObject.getLocalities()[0]+"</div>";
                                        value = value.replace("undefined", "");
                                        displayName = displayName.replace("undefined", "");

                                        pushGeoData(displayName, value, jsonData);
                                    }
                                }
                            }
                        }));
                    })

                    return Promise.all(arrayPromises).then(function(){
                        console.log(arrayResult)
                        return ymaps.vow.resolve(arrayResult);
                    });
                })
            }
        }
    };
},
computed() {
  ...
  geoInput() {
    return document.getElementById('geo-select__input').querySelector('.app-select__input')
  },
},
methods: {
  yaMapInit() { // methods()
  this.SuggestView = new ymaps.SuggestView(this.geoInput, {
    provider: this.provider,
    boundedBy: this.bounds[this.brandCode]
  });
},
mounted() {
  ymaps.ready(this.yaMapInit());
}

Comments

[Val_epa]

огромнейшее спасибо за твой пример обработки подсказок, очень выручил!

Answer 1

[Alex]

Вынесите suggest в отдельный метод компонента
И вызывайте

this.SuggestView = new ymaps.SuggestView(this.geoInput, {
    provider: {suggest: (...args) => this.suggest(...args)},
    boundedBy: this.bounds[this.brandCode]
  });

Контекст должен сохранится

Comments

[dicem]

Получается таким образом?

methods: {
            suggest(request, options) {
                delete options['provider'];
                return ymaps.suggest(request, options).then(items => {
                    let arrayResult = [];
                    let arrayPromises = [];

                    function pushGeoData(displayName, value, jsonData) {
                        arrayResult.push({displayName: displayName, value: value, jsonData: jsonData});
                    }

                    items.forEach(i => {
                        arrayPromises.push(ymaps.geocode(i.value).then(gc => {
                            let displayName = "";
                            let value = i.value;
                            if (!i.value.match(/.*подъезд.*/)) {
                                let geoObject = gc.geoObjects.get(0);

                                if (geoObject) {
                                    let jsonData = JSON.stringify({
                                        'city': geoObject.getLocalities()[0] || geoObject.getAdministrativeAreas()[0],
                                        'street': geoObject.getThoroughfare() || geoObject.getLocalities()[0],
                                        'house': geoObject.getPremiseNumber(),
                                    });

                                    if (geoObject.getCountryCode() == "RU") {
                                        value = value.replace(geoObject.getCountry()+", ", "");
                                        value = value.replace(geoObject.getAdministrativeAreas()[0]+", ", "");
                                        displayName = "<div class='yandex-map-address_info'>"+value+"</div><div class='yandex-map-localities_info'>"+geoObject.getCountry()+", "+geoObject.getLocalities()[0]+"</div>";
                                        value = value.replace("undefined", "");
                                        displayName = displayName.replace("undefined", "");

                                        pushGeoData(displayName, value, jsonData);
                                    }
                                }
                            }
                        }));
                    });

                    return Promise.all(arrayPromises).then( function(){
                        console.log(this.test)
                        return ymaps.vow.resolve(arrayResult);
                    });
                });
            },
}

а в data() типа так указать?

provider: {
      suggest: this.suggest()
}

[Alex]

dicem, Зачем вам метод в data?

[dicem]

Alex, да незачем, сделал как вы написали собсна, все ок, спасибо!

[Alex]

dicem, И проведите рефакторинг. А то ж все ваши проблемы именно из-за плохого кода. Провели бы рефакторинг и часть ошибок сразу бы ушла, а остальное найти было бы намного проще

[dicem]

Alex, Я бы с удовольствием, но таких задач мне не ставили, а инициатива либо наказуема либо не оплачиваема.