Property that is dynamically populated based on data retrieved from an external API

My template relies on an API call (Firebase) to determine the return value of my computed property, which in turn decides whether certain elements are displayed.

However, I've noticed that my computed property is not reactive - its value in the template remains unchanged even after the API call. What could be causing this?

JS:

myComputedProperty: function() {
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      return true;
    }
    else {
      return false;
    }
  });
}

Template:

<span v-if="userConnected">
  User connected
</span>
javascriptvue.jscomputed-properties

Answer №1

The value you are receiving is not from the computed property, but rather from the callback function.

To properly check this, it is recommended to use either data() and created() or mounted():

data () {
    return {
        isLoggedIn: false
    };

},
created () {
    firebase.auth().onAuthStateChanged((user) => {
        this.isLoggedIn = !!user
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differences between React's useCallback and useMemo when handling JSX components

I have created a custom component called CardList: function CardList({ data = [], isLoading = false, ListHeaderComponent, ListEmptyComponent, ...props }) { const keyExtractor = useCallback(({ id }) => id, []); const renderItem = useCallba ...

javascriptreactjsreact-nativereact-hooks

What is the best way to create an `isHook` function in my code?

Is there a way to determine if a function passed is a React Hook? isHook(useState); // returns true isHook(() => {}); // returns false; I am looking for a method to distinguish whether a function attached to an object property is a hook or not. In cas ...

javascriptreactjs

Error message: While running in JEST, the airtable code encountered a TypeError stating that it cannot read the 'bind' property of an

Encountered an error while running my Jest tests where there was an issue with importing Airtable TypeError: Cannot read property 'bind' of undefined > 1 | import AirtableAPI from 'airtable' | ^ at Object.&l ...

javascripttypescriptjestjsairtable

Managing errors in Node.js when inserting data into MongoDB

Hello everyone, I'm currently working on handling errors in the user signup module using Express. However, I'm facing an issue where the errors are not being handled correctly. Here is my code: handler.post(async (req, res) => { let otp = M ...

javascriptnode.jsexpress

What is the process for defining the type of the context for an Apollo resolver?

I am facing an issue with my Apollo GraphQL subgraph where I need to define the type for the context argument in my resolvers. When creating a resolver, I tried setting the context type like this: interface Context { dataSources: { shopify: Shopify; ...

javascriptnode.jstypescriptgraphqlapollo

Encountering an incorrect number of parameters for "undefined" during the deployment of a smart contract

I am facing an issue while attempting to deploy my first Voting contract on the testRPC. The error seems to arise from the arguments parameter in the code snippet below. When I tried passing an empty array, it gave an error stating "Got 0 expected 1!". Si ...

javascriptnode.jsethereumsolidityweb3js

Utilize the 'Save and add another' feature within a bootstrap modal

Hello everyone, this is my first time seeking assistance on this platform. If any additional information is required, please do not hesitate to ask. Currently, I am working with JavaScript in combination with the handlebars framework. Within a bootstrap ...

javascripthtmlbootstrap-4handlebars.jsbootstrap-modal

Unable to see the array values in jquery autocomplete

Hey there, I'm currently using jQuery autocomplete with CodeIgniter. My result array is fetched from the database and I am sending it back as JSON-encoded data. However, I am facing an issue where the values in the search results are not being display ...

javascriptphpjqueryarrayscodeigniter

Determine the central point of the cluster with the most concentrated xy data points

In my project, I have a 200 x 200 square grid where users can vote on the next desired position of an object within this space. Each time a user submits their vote, the XY position is added to an array. Currently, to determine the "winning" position, I ca ...

javascriptarrayscoordinate-systems

Serve Webpack bundle on various routes - Express Way

I recently completed a web application using an Express backend and React frontend. Upon sending a request to the Express server, it undergoes a process where the URL is checked against the backend routes. If there isn't a match, the React bundle gen ...

javascriptnode.jsreactjsexpresswebpack

Technique for transferring information between properties of a class instance within an Express server's architecture

I am in the process of developing a monitoring server for a library using Express. My goal is to create different routers and routes, while also being able to access functions and variables from the monitor-server class. Currently, I have passed the ' ...

javascripttypescriptexpress

Seeking assistance for my dissertation assignment: electron, express, and SQLite3

I am currently dedicated to my thesis project, which involves designing an educational desktop video game for both public and private schools within my city. Being a fan of electron, I thought it would be a great idea to develop my app using this platform ...

javascriptnode.jssqliteexpresselectron

What is the best way to access and read the contents of a text file retrieved via axios?

I am looking to utilize a REST API to read the text from a file. I have been using marked to convert the txt file to markdown and display it in vue.js. However, I am unsure of how to actually retrieve the contents of the file. During my research, I came ...

javascriptfilevue.jsaxios

The v-for in Vue is not displaying the accurate text in the modal window and is only showing the data for the first item

In the process of learning Vue and Bootstrap, I am creating a blog where I want a modal window to pop up with the post information when the user clicks on the comment button. However, the issue I'm facing is that the modal only displays information fr ...

htmlnode.jsvue.js

Encountering an unexpected token error while attempting to incorporate JQuery into a React JS project

I am currently diving into the world of React.js and attempting to incorporate a side navigation bar on my homepage. However, I encountered an eslint error when trying to implement the sidebar using jQuery code. Below you will find the code snippet for the ...

javascripthtmljquerycssreactjs

Pass on the error to the callback in Node.js

Here is the code snippet in question: User.findById(id, function(err, user) { //blah blah }); The findById method can be found within the User module. Here's a glimpse at its implementation: exports.findById = function(id,callback) { connec ...

javascriptnode.js

The CanJS model is unable to retrieve data from a .json file

Implementing MVC using AMD in canjs with requirejs has been my current focus. Here's a look at my domains.json file: [ "1":{"uid": "1","urls": "domain1.abc.com"}, "2":{"uid": "2","urls": "domain2.abc.com"}, "3":{"uid": "3","urls ...

javascriptjsonrequirejscanjscanjs-model

Refine current attributes of an object in Typescript

In typescript, I have an object of type any that needs to be reshaped to align with a specific interface. I am looking for a solution to create a new object that removes any properties not defined in the interface and adds any missing properties. An exam ...

javascripttypescriptinterfacegraphql

Troublesome issue with the Focus() function in JavaScript

I'm having trouble setting the focus on a textbox with the id "txtCity." document.getElementById("txtCity").focus(); Any suggestions on how to make it work? ...

javascript

Using the Set function to compare distinct elements within different arrays

Update: After reviewing the link shared by faintsignal, it appears to be the most suitable answer. It not only clarifies why this behavior is happening but also provides a solution to the issue at hand. I am currently working with an array and trying to d ...

javascriptset