Why would a computed property return undefined?

Question

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.

@thanksd surely computed.allcases would still resolve to the function itself? — Nick is tired
– Nick is tired, Commented Jun 1, 2017 at 15:26
@thanksd: sorry, I do not understand, could you please elaborate? msg.hits.hits is an Array, and this is what is returned — WoJ
– WoJ, Commented Jun 1, 2017 at 15:28
@NickA Nope, that's not how computed properties work. The function he defined for the computed property will run, but if it doesn't return anything, accessing the vue instance's allcases property will be undefined — thanksd
– thanksd, Commented Jun 1, 2017 at 15:29
msg.hits.hits is returned in your promise's done callback. It's not being returned in the scope of your computed property's method. — thanksd
– thanksd, Commented Jun 1, 2017 at 15:31

thanksd · Accepted Answer · 2017-06-01 15:42:14Z

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

"...regular data property initially set to null" - setting the target store property with initial null value solved my issue, thanks!

Faris · Accepted Answer · 2017-06-01 15:31:18Z

0

As per jQuery docs, calling $.ajax returns jqXHR, and that is what you are saving in your request variable, not msg.hits.hits

to achieve what you are trying to do, consider using vue-async-computed

edited Jun 1, 2017 at 15:31

answered Jun 1, 2017 at 15:28

Faris

5432 silver badges8 bronze badges

3 Comments

Roy J Over a year ago

He's not even returning the promise.

Faris Over a year ago

@RoyJ yes, but he's saving it in request so i assumed that's what he's consuming!

thanksd Over a year ago

But he doesn't return the request variable (which wouldn't make sense anyways). That's why the value of the computed property is undefined.

Collectives™ on Stack Overflow

Why would a computed property return undefined?

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related