Issue calling Vue Method via Vue Computed

Question

I believe this issue is related to JS in general as opposed to VueJS. But I have the following Vue Method that returns a Firebase Call and returns the object asked for. This is working:

methods: {
  getSponsor (key) {
    db.ref('businesses').child(key).on('value', snap => {
      console.log(snap.val())
      return snap.val()
    })
  }
}

[Object]

Now, when I call this method from a computed property, it results in undefined:

computed: {
  sponsor () {
    console.log(this.getSponsor(key))
    return(this.getSponsor(key))
  }
}

Undefined

Why is this? Is it because of how I return my method?

getSponsor does not return anything. It just executes some async code. — Bert
– Bert, Commented Jul 27, 2017 at 18:34
Ah, makes sense. So in order to fix it, I need to turn the code inside getSposor into a function and return that function? Sorry, my JS understanding is a little sub-par. — Auzy
– Auzy, Commented Jul 27, 2017 at 18:49

Nati V · Accepted Answer · 2017-07-27 19:20:35Z

1

When you call to async action you getting out from the function context, meaning you can't return a value from the callback function that will be returned in the main function.

The solution for your problem is to set from the callback function a property in the data (declare it first) and then in your computed property get the value of that property.

 computed: {
    sponsor () {
        return(this.sponsor)
    }
 }
 methods: {
  getSponsor (key) {
    let self = this;
    db.ref('businesses').child(key).on('value', snap => {
      console.log(snap.val())
      self.sponsor =  snap.val()
    })
  }
 }

If you will call to the getSonsor inside your computed property it will runs twice, once in the initilaztion proccess and once when the sponsor property will change.

Because you only need to run it once I guess or on event you can do it on beforCreate/mounted etc.. depend on your needs

answered Jul 27, 2017 at 19:20

Nati V

7004 gold badges10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Auzy Over a year ago

Awesome, I moved it to mounted and declared the data on the Vue instance and it works. Thank you!

Bert Over a year ago

Minor nit: the computed property at this point is superfluous. Otherwise, I like it!

Nati V Over a year ago

@BertEvans You are right, but maybe he wants to do a transformation on the value

thanksd Over a year ago

The sponsor computed will actually cause a "Maximum call stack size exceeded" error because it's returning itself.

Collectives™ on Stack Overflow

Issue calling Vue Method via Vue Computed

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related