vuejs axios数据未填充[重复]答案

【问题标题】：vuejs axios data not populated [duplicate]vuejs axios数据未填充[重复]
【发布时间】：2018-07-25 09:28:46
【问题描述】：

虽然从 Axios Get 方法填充的 VueJS 数据可以通过将数据输出到控制台来确认，但我无法从前端访问数据。

这是我的示例 JSON 输出

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

这是我的前端代码

<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>

这是我的 VueJS 和 AXIOS 代码

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

loadDropDown 函数中的 this.locations 返回一个有效的 JSON。但是 JSON 不会传递到前端（即 HTML）。当我尝试输出“位置”时，它将返回一个空的 {}

想法？谢谢

【问题讨论】：

标签： json vue.js axios

【解决方案1】：

问题在于 axios 回调中的“this”。你应该使用箭头函数来保持上下文

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

【讨论】：

那是一个新组件。 OP 正在创建一个新的 Vue 实例而不是组件。
哦，我明白了。你说的对。所以我认为问题出在“这个”上。在 axios 里面的函数中使用 this。
我认为你是对的。我看了一眼。应该使用箭头函数来保留父this。