0

На сайте есть поле, которое отвечает за выбор города. введите сюда описание изображения

Когда вводятся больше 2 букв в поле "Название города", то идет запрос к API и ответ должен отобразиться в блоке. Однако данные не отображаются, хотя ответ приходит.

<div class="select_list" id="select_city" v-on:click="getTown($event)">
     <div class="form_select_wrap">
           <input type="text" class="form_select" id="search_select" placeholder="Название города...">
      </div>
       <div class="scroll" >
           <div class="select_list_radio" @click="select_list_radioClick($event, 'sort')" v-for="city in cities"><input type="radio" :id="city.id" name="city_list"><label :for="city.id"><span>{{city.name}}</span> ({{city.region}})</label></div>
            </div>
       </div>







 data () {
                return {
                    cities: [],
                }
            },
    methods: {
        getTown(e) {
                    $("#search_select").keyup(function(){
                        if ($(this).val().length > 2){
                            queryParams['str'] = $(this).val();
                            callApi ('towns', queryParams,'').then((res) => {
                                this.cities = res.data.data;
                                console.log(2,$('#li').length, this.cities);
                            })
                        }
                    })
                },
    }

Я предполагаю, что это из-за того, что страница уже построена с пустым массивом данных и теперь я пытаюсь туда "запихнуть" еще данные:(

2 ответа 2

3

Опять же, Вам не нужно было делать это средствами jquery, если вы используете Vue.js.

Всё намного проще, вы можете использовать watch

<input v-model="cityName" type="text" class="form_select" id="search_select" placeholder="Название города...">

data () {
    return {
        cities: [],
        cityName: ''
    }
},
watch: {
    cityName(newCity) { //Вызывается при каждом изменении модели cityName
        if(newCity.length > 2) {
            queryParams['str'] = newCity;
            callApi('towns', queryParams, '').then((res) => {
                this.cities = res.data.data;
            });
        }
    }
},
0
getTown(e) {
  let self = this;
  $("#search_select").keyup(function() {
    if ($(this).val().length > 2) {
      queryParams['str'] = $(this).val();
      callApi('towns', queryParams, '').then((res) => {
        Vue.set(self, 'cities', res.data.data);
        console.log(2, $('#li').length, self.cities);
      })
    }
  })
},

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.