axios使用vue获取json数据答案

【问题标题】：Axios fetch json data using vueaxios使用vue获取json数据
【发布时间】：2023-03-23 03:04:02
【问题描述】：

我尝试在 vue.js 应用程序中使用 axios.get 从 mongodb（json 格式）中获取一些用户数据。在此之后，我想通过遍历用户数组中的所有用户对象来可视化这些数据。但我的问题是，每个字符都是这个数组中的一个对象。我想要的是，每个 user-json 文件都是这个数组中的一个对象。如果我有三个用户对象 user.length 应该是三个。这里是axios 调用的代码：

axios
    .get(RL + "/users")
    .then(response => {       
        this.users = response.data
    })
    .catch(e => {
        this.errors.push(e);
        console.log("Errors in Users: " + e);
    });

有了这个片段，我想遍历所有对象，显示用户名。但是user.name 总是只有一个字符而不是全名。

<div v-if="users">
    <li v-for="user in users">
        {{user.name}}
    </li>
</div>

【问题讨论】：

你能举例说明你的反应吗？
当我使用 console.log(this.users) 它只给我 [object Object]。但是，当我使用 console.log(JSON.stringify(this.users)) 时，它会为一个用户提供以下类似 json 的输出：{“payload”:{“forename”:“jon”,“surname”:“doe ”,“年龄”:“28”}}
它只返回一个对象和一个用户，那有什么问题呢？如果您获得更多用户会怎样？
我非常怀疑console.log(this.users) 产生[object Object]。
我认为截图会更容易理解，但在我看来，a）只有一个用户被返回，b）用户存储在response.data.payload，c）肯定有没有name 属性

标签： javascript json vue.js fetch axios

【解决方案1】：

没有任何插件。

var app = new Vue({ el: '#app',

// YOUR DATA HERE
data: {
    filterResult: [] // THIS IS YOUR JSON FILE
},

// READY FUNCTION HERE
created: function() {
    this.filterResult = this.dataResult();
},

// YOU FUNCTION HERE
methods: {
    // CALLING API
    dataResult: function() {
        $.getJSON('/api/feature/stores/list', function(json) {
            app.results = json;
            app.filterResult = json;
        });
    },
}

});

【讨论】：