Why would a computed property return undefined?

Asked By: Anonymous

Note: The data used in the program which is causing me trouble comes from outside so I am sorry not be able to provide a fully working example. Please just let me know if something is missing, I am adding all information I beive to be relevant to understand the context

My Vue instance has a computed property which is dependent on a AJAX call to bring in data. What it does is to turn these returned data (as it) into a Vue property (allcases below) to be reused in the HTML code.

The computed section from my Vue instance:

computed: {
        allcases: function() {
            console.log('getting all cases')
            var request = $.ajax({
                    (...) <- a working AJAX call here, please see below
                })
                .done(function(msg) {
                    console.log('found: ' + JSON.stringify(msg.hits.hits));
                    return msg.hits.hits;
                })
                .fail(function(jqXHR, msg) {
                    console.log('error posting incident: ' + msg);
                });
        }
    }

When running this I see on the console

found: {"_index":"incidents","_type":"incidents","_id":"AVxeaaE5n3UYRVv5wrrJ","_score":1,"_source":{"time":"2017-05-31T14:09:22+02:00","lastname":"ert","firstname":"ertr"}},{"_index":"incidents","_type":"incidents","_id":"AVxjykjeqc2UmzuwNYsy","_score":1,"_source":{"time":"2017-06-01T15:13:40+02:00","lastname":"hello2","firstname":null}},{"_index":"incidents","_type":"incidents","_id":"AVxjx3TKqc2UmzuwNYsw","_score":1,"_source":{"time":"2017-06-01T15:10:34+02:00","lastname":"hello","firstname":"worldddd"}},{"_index":"incidents","_type":"incidents","_id":"AVxfOF-sRInTI31ZgCYt","_score":1,"_source":{"time":"2017-06-01T15:12:20+02:00","lastname":"hello","firstname":"worldddd"}},{"_index":"incidents","_type":"incidents","_id":"new incident","_score":1,"_source":{"time":"2017-06-01T15:12:41+02:00","lastname":"hello1","firstname":"ertert"}},{"_index":"incidents","_type":"incidents","_id":"AVxfN4wIRInTI31ZgCYs","_score":1,"_source":{"time":"2017-05-31T17:54:54+02:00","lastname":null,"firstname":null}},{"_index":"incidents","_type":"incidents","_id":"AVxjol5dRInTI31ZgCmI","_score":1,"_source":{"time":"2017-06-01T14:30:04+02:00","lastname":"hjkj","firstname":"hjkhjk"}},{"_index":"incidents","_type":"incidents","_id":"AVxjyKaFqc2UmzuwNYsx","_score":1,"_source":{"time":"2017-06-01T15:11:53+02:00","lastname":"hello","firstname":"world"}}]

so right before return msg.hits.hits the content of msg (and msg.hits.hits) is correct and the content is what I expected.

This example replicates the basic one from the documentation.

allcases is however undefined when I run the script.

I know this because

-1-

I am watching the Vue components in the Vue extension in Chrome

-2-

The HTML file has the following code

<div id="currentcases">
  {{allcases}}
</div>

which, when observed in Dev Tools’ Elements, is empty:

<div id="currentcases">

            </div> 

I really have no idea what is wrong with this code.

Solution

Answered By: Anonymous

Your allcases computed property is undefined because the method for that computed property is not returning a value. When you return a value in the done callback, that does not magically also get returned in the scope of your computed property method.

Unless you are expecting to fire an async call each time some dependant vue property changes, I wouldn’t make this code a computed property.

I would make allcases a regular data property initially set to null:

data() {
  return {
    allcases: null,
  }
}

Then, I’d put your async call in a new method (say fetchAllcases). In this method you can directly set the allcases data property to msg.hits.hits in the done callback:

methods: {
  fetchAllcases() {
    let self = this;
    console.log('getting all cases')
    var request = $.ajax({
            (...) <- a working AJAX call here, please see below
        })
        .done(function(msg) {
            console.log('found: ' + JSON.stringify(msg.hits.hits));
            self.allcases = msg.hits.hits;
        })
        .fail(function(jqXHR, msg) {
            console.log('error posting incident: ' + msg);
        });
  }
}

Then, just fire this method once in the component’s mounted lifecycle hook:

mounted() {
  this.fetchAllcases();
}