VueJS2 属性未定义

Question

I wrote the following code and Vue complains:

[Vue warn]: Property or method "incidents" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

I don't see why incidents cannot be accessed?

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
                var incidentsReceived = response.data.map(function (incident) {
                    return incident;
                });
                Vue.set(app, 'incidents', incidentsReceived);
            })
        },

        getResponders: function() {
            console.log('fetchResponders');
            var app = this;
            this.$http.get('/api/v1/responders').then(function(response) {
                // set data on vm
                var respondersReceived = response.data.map(function (responder) {
                    return responder
                });
                Vue.set(app, 'responders', respondersReceived);
            });
        }
    }
})

Answer 1

data is meant for internal component data modeling, while props, which can be assigned externally, are defined using the props key for your component.

In other words, try:

var app = new Vue({
  ...,
  props: {
    incidents: {
      type: Array,
      required: false //change this as you see fit.
    }
  },
  ...
});

For full documentation on component properties, please refer to the official guide .

Answer 2

EDIT: Didn't read the code very well for the first time. Verify that you have data inside the response and if not don't set it the incidents array.