vuejs axios data not populated

Question

While the VueJS data that is populated from Axios Get method and can be confirmed by outputting the data into console, I am not able to access the data from the front end.

Here is my sample JSON ouput

{
"locations" : {
    "items" : ["abc","def","ghi"],
    "selectedLocation" : ""
},
"categories" : {
    "items" : {
        "doctor" : ["test", "test2", "test3"],
        "management" : ["test1","test2","test3"]
    },
    "subcategories":[],
    "selectedCategory":"",
    "selectedSubCategory":""
}

Here is my Front End Code

<form id="vueAppJobSearchPanel" class="offset-top-10 offset-sm-top-30" action="/job-search">
<div class="group-sm group-top">
    <div style="max-width: 230px;" class="group-item element-fullwidth">
        <div class="form-group">
            <select v-model="locations.selectedLocation" id="form-filter-location" name="loc" data-minimum-results-for-search="Infinity" class="form-control">
                <option value="">{{global.job_search_panel.placeholder_title_location}}</option>
                <option v-for="location in locations.items" :value="location">${location}</option>
            </select>
        </div>
    </div>
    <div style="max-width: 230px;" class="group-item element-fullwidth">
        <div class="form-group">
            <select v-model="categories.selectedCategory" id="form-filter-location" name="cat" data-minimum-results-for-search="Infinity" class="form-control">
                <option value="">{{global.job_search_panel.placeholder_title_category}}</option>
                <option v-for="(category_obj, category) in categories.items" :value="category">${category}</option>
            </select>
        </div>
    </div>
</div></form>

Here is my VueJS and AXIOS code

const vm = new Vue({
el: '#vueAppJobSearchPanel',
delimiters: ['${', '}'],
data: {
    test: {
        "items" : ["abc","def","ghi"],
        "selectedLocation" : ""
    },
    locations : {},
    categories : {}
},
mounted(){
    this.loadDropDown();
},
methods: {
    loadDropDown : function() {
        let modelName = "CustomModule1";
        let apiUrl = '/api/' + modelName + '/getFields';

        axios.get(apiUrl)
            .then(function (response) {
                this.locations = constructLocationDropDownValues(response, modelName);
                this.categories = constructCategorySubCategoryDropDownValues(response, modelName);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
}});

this.locations inside the loadDropDown function return a valid JSON. However the JSON is not passed to the front end (i.e. HTML). When I tried to output "locations" it will return an empty {}

Ideas? Thank you

facuesr · Accepted Answer · 2018-02-14T18:58:18.967

2

The problem is with 'this' inside the axios callback. You should use arrow function to keep the context

axios
    .get(apiUrl)
    .then(response => {
      this.locations = constructLocationDropDownValues(response, modelName)
      this.categories = constructCategorySubCategoryDropDownValues(response,modelName)
    })
    .catch(function (error) {
      console.log(error)
    })

edited Feb 14 '18 at 18:58

answered Feb 14 '18 at 18:40

facuesr

46
5

That is for a new component. OP is creating a new Vue instance not a component. – Wild Beard Feb 14 '18 at 18:41
1

oh I see. You are right. So I think the problem is in 'this'. Using this in the function inside axios. – facuesr Feb 14 '18 at 18:47
I think you are correct. I glanced over that. Should be using arrow functions to retain the parent `this`. – Wild Beard Feb 14 '18 at 18:49

vuejs axios data not populated

1 Answers1