Как динамически подгрузить данные в vue js?

Question

[nastya_zholudeva]

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

Когда вводятся больше 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);
                        })
                    }
                })
            },
}

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

Answer 1

[Igor Koch]

Enjoy:

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);
      })
    }
  })
},

P.s. Отучайтесь пихать Jquery туда где он не нужен, ваш код прямо таки хочется взять и ... переписать)
Есть куча уже готовых компонентов под ваши задачи: https://github.com/vuejs/awesome-vue#autocomplete

Comments

[nastya_zholudeva]

@amux
:) Спасибо большое, я только учусь:)

Answer 2

[Артур Борденюк]

На что ссылается ссылается this внутри keyup( function(){} ) ?

Плюс к тому же этот функционал можно реализовать и без jQuery

Comments

[nastya_zholudeva]

@HighQuality
this ссылается на input id="search_select"

[Артур Борденюк]

nastya_zholudeva, именно! а изменять города нужно же в компоненте

[nastya_zholudeva]

Артур, но ведь я проверяю кол-во вводимых символов именно в том инпуте, их ведь там вводят. А потом делаю запрос и сохраняю данные