Trouble arises when attempting to execute a Vue method through a Vue computed property

Question

Trouble arises when attempting to execute a Vue method through a Vue computed property

It seems that the issue at hand is more related to general JavaScript rather than being specific to VueJS. I have a Vue Method set up to make a Firebase Call and return the requested object, which is functioning properly:

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

[Object]

However, when I invoke this method from a computed property, it returns as undefined:

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

Undefined

I'm curious as to why this is happening. Could it be related to how the method is being returned?

javascript vue.js vuejs2

Answer 1

Answer №1

When a call is made to an async action, you exit the function context, which means that you cannot return a value from the callback function that will be returned in the main function.

To solve this issue, you can set a property in the data object from the callback function (make sure to declare it first), and then access the value of that property in your computed 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 call the getSponsor method inside your computed property, it will run twice - once during initialization and once when the sponsor property changes.

Since you only need it to run once, you can do so in beforeCreate, mounted, or any other lifecycle hook depending on your requirements.

Answer 2

When a call is made to an async action, you exit the function context, which means that you cannot return a value from the callback function that will be returned in the main function.

To solve this issue, you can set a property in the data object from the callback function (make sure to declare it first), and then access the value of that property in your computed 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 call the getSponsor method inside your computed property, it will run twice - once during initialization and once when the sponsor property changes.

Since you only need it to run once, you can do so in beforeCreate, mounted, or any other lifecycle hook depending on your requirements.

Trouble arises when attempting to execute a Vue method through a Vue computed property

Answer №1

Similar questions

Node, Express, and Angular redirection problem encountered

Setting up a retrieval callback in mongoose and storing it in a global variable

The issue of empty data in Symfony 3 Form Ajax Post Requests

What causes setInterval to create an endless loop when used inside a while loop in JavaScript?

Having trouble getting an HTML form to work when making a PHP and Ajax request

Using JavaScript's document.write method to display HTML code, along with a variable retrieved from a Flash application

Using VueJS to showcase user input in a dynamic list and a pop-up modal

Deselect a checkbox by selecting a radio button with just Javascript code

Activate a JavaScript mouse event outside of an element

Experiencing difficulties managing NodeJS session

A method for retrieving the variables from the initial API function for use in a subsequent API function

Using vuex-class to interact with Vuex in non-Vue components

Enhance Your Browsing Experience with Ajax Chrome Extension

Remove inline CSS from HTML elements

Error message in VueJS TypeScript: Implicit declaration of type 'props' as 'any'

The compatibility issue between Angular JS App and JSPDF is causing malfunctions specifically in Internet Explorer

The click function is a member of an object within an emit event

Assistance with utilizing Regular Expressions to extract the className from a React/JSX component

Tips on incorporating multiple lines of placeholder text into a textarea field:

Steps for repairing a damaged vuejs project following the inclusion of the "less" and "less-loader" modules