VUEJS data.map 不是函数答案

【问题标题】：VUEJS data.map is not a functionVUEJS data.map 不是函数
【发布时间】：2017-06-23 13:40:12
【问题描述】：

我正在使用 VueJS 并收到一条我以前没有的错误消息。事件 var 是一个数组，所以我认为它应该可以工作？

在我的 HTML 文件中包含：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.js"></script>

当我记录 response.data 的输出时，我看到一个数组：

Uncaught (in promise) TypeError: response.data.map is not a function 在 Vue 3 美元。 (main.js:17)

var app = new Vue({
    el: '#app',
    data: {
        responders: [],
        incidents: []
    },

    mounted: function () {
        this.getIncidents();
    },

    methods: {
        getIncidents: function() {
            console.log('getIncidents');
            var app = this;
            this.$http.get('/api/v1/incidents').then(function(response) {
                // set data on vm
                var incidentsReceived = response.data.map(function (incident) {
                    return incident
                });
                Vue.set(app, 'incidents', incidentsReceived);
            });
        }
})

【问题讨论】：

console.log(response.data) 给你什么？我最初的想法是它不是一个数组。
嗨罗斯，我在打印 response.data 时添加了控制台输出的图片
你能不能展示你的 Route/Controller 方法有什么？
可能跑题了，但var app = ... 两次并不是一个好主意
正如@nozzleman 所说，将var app = this 更改为var self = this 之类的东西是个好主意，然后更改该方法中的所有引用。

标签： laravel vue.js

【解决方案1】：

您无法映射响应。尝试将响应数据设置为您的数据，这样做

this.$http.get('/api/v1/incidents').then((response) => {
                // set data in your data object
                this.incidents = response.data
                // Now you can map over the incidents and return 
                return this.incidents.map(incident => return)
            });

【讨论】：