Access variable value in mounted function vuejs

Question

I have a very simple application that initiates a search and filter based on the query parameters. When I initiate the query https://example.com/?filter=2134 it initiates the search and shows me the result of schools. This means that the searchSchools() function is being executed and the results are being fetched.

However, then I execute the filterSuggestions() function, it doesn't seem to apply the filter.

However, when I do a console.log(suggestedSchools) within mounted, it returns empty.

const app = new Vue({
    el: '#app',
    data: {
        suggestedSchools    :   [],
        filter              :   '',
        filteredSchools     :   [],
    },

    mounted: function () {
      // checking some get parameters and conditions and triggering the search
      this.searchSchools(); // function that initiates ajax request and store the results into suggestedSchools

      this.filter = 2134; // the postcode value comes from the get request
      this.filterSuggestions(); // function that applies the postcode filter to the suggestedSchools list and assign the filtered results to filteredSchools.

    },

    methods: {
       searchSchools() {
           axios.get('/search-school').then(response => {
                        this.suggestedSchools = response.data;
                        this.filteredSchools = response.data;
                    })

       },

       filterSuggestions()
       {
           this.filteredSchools =  this.suggestedSchools.filter(school => {
               // filtering logic
           }

       },
    },


});

Also, [`data` must be a function](https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function) — blex, Jun 19 '20 at 00:46
@blex That's only true for components. For the root Vue instance, `data` can be an object. — tony19, Jun 19 '20 at 04:04
Please read this to understand what is the main issue here: [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321) — palaѕн, Jun 19 '20 at 05:06
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — AT82, Jun 19 '20 at 06:44

score 0 · Answer 1 · answered Jun 19 '20 at 00:45

That's because the searchSchools function makes an asynchronous request so when filterSuggestions function is executed it finds the suggestedSchools array empty. I suggest it should be more like this:

const app = new Vue({
    el: '#app',
    data: {
        suggestedSchools    :   [],
        filter              :   '',
        filteredSchools     :   [],
    },

    mounted: function () {
      // checking some get parameters and conditions and triggering the search
      this.searchSchools(); // function that initiates ajax request and store the results into suggestedSchools

      this.filter = 2134; // the postcode value comes from the get request

    },

    methods: {
       searchSchools() {
           axios.get('/search-school').then(response => {
                        this.suggestedSchools = response.data;
                        this.filteredSchools = response.data;
                        this.filteredSuggestions()
                    })

       },

       filterSuggestions()
       {
           this.filteredSchools =  this.suggestedSchools.filter(school => {
               // filtering logic
           }

       },
    },


});

Access variable value in mounted function vuejs

1 Answers1