How to dynamically load data in vue js?

Question

Vue.js

The site has a field that is responsible for choosing a city.

When more than 2 letters are entered in the "City Name" field, then a request is made to the API and the response should be displayed in the block. However, the data is not displayed, although the response comes.

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

I assume that this is because the page has already been built with an empty data array and now I'm trying to "push" more data there :(

Answer 1

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

There are a lot of ready-made components for your tasks: https://github.com/vuejs/awesome-vue#autocomplete

Answer 2

What does this refer to inside keyup( function(){} ) ?
Plus, this functionality can be implemented without jQuery