Fields that have been loaded are not initialized within the supplementary function

Two functions are used to load components for a page and save them in two fields - representatives and allUsers. An additional function, subtractSets(), is then used to modify the loaded data slightly. The issue arises when these fields (representatives and allUsers) are not initialized within this additional function. How can I ensure that the loaded data is accessible within subtractSets()?


setup() {
     const representatives = ref([])
     const allUsers = ref([])

      return { 
         representatives,
          users
       }
    },

methods(): {
   loadUsersRepresentatives() {
       axios.get('getRepresentatives').then(res => {
           this.representatives = res.data
        }).catch(() => {
            ...
        });
    },
    loadAllUsers() {
        axios.get('/getAllUsers').then(res => {
            this.allUsers = res.data
        }).catch(() => {
             ...
        });
    },
    subtractSets(obj1, obj2) {
        // manipulation logic here
    },
    showRepresentativesDialog(facultyID) {
        this.loadUsersRepresentatives(facultyID)
        this.loadAllUsers()
        this.subtractSets(this.representatives, this.allUsers)
        this.representativesDialog = true
    }
},

Answer №1

You need to implement the async / await functionality in your code.

methods(): {
   async loadUsersRepresentatives() {
       return axios.get('getRepresentatives').then(res => {
            this.representatives = res.data
        }).catch(() => {
            ...
        });
    },
    async loadAllUsers() {
         return axios.get('/getAllUsers').then(res => {
           this.allUsers = res.data
         }).catch(() => {
             ...
         });
    },
    subtractSets(obj1, obj2) {
        ...
    },
    async showRepresentativesDialog(facultyID) {
          await this.loadUsersRepresentatives(facultyID);
          await this.loadAllUsers();
          this.subtractSets(this.representatives, this.allUsers);
          this.representativesDialog = true;
    }
},

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

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

How to show an image in a Vue component using a Laravel storage folder

My images are being stored in the following location: Storage/app/public/userImages They are saved successfully, but when I try to retrieve them in my Vue component, I get a 404 error stating that they are not found. <img :src="`/storage/${post. ...

Tips on entering a text field that automatically fills in using Python Selenium

One of the challenges I am facing on my website is an address input text field that gets automatically populated using javascript. Unlike a drop-down field where you can select values or a standard text field where you can manually type in information, thi ...

Embedding Angular code into HTML is a common practice in web

When working with Angular, you can include simple expressions like {{ 5 + 5 }} without any issues. However, more complex operations such as using angular.forEach to iterate over an array and log specific values do not work as expected. {{ angular.forEach( ...

What is the method of showing a leaflet map in a particular div tag?

I want to showcase a leaflet map, but I specifically need it to be displayed in a div tag with a particular id like document.getElementById("map"). Here is the code snippet below which utilizes Vue.js: Here is the div tag where the map will be rendered: ...

Troubleshooting a bug in React TypeScript with conditional logic

I have a new message button and a few conversations. When I click on a conversation, the right side should display the message box. Clicking on the new message button should show the create new message box. Here are my useState and handlers: const [newMess ...

Exploring the Power of Ajax Interceptor in Framework7-vue-cli

I have a challenge where I need to redirect all ajax requests with a status code of -1 in the response to the login screen. Despite my efforts, I am unable to monitor it. What steps should I take next? Appreciate your help. My approach: app.js Framework7. ...

Node.js web server becomes inactive when not actively used

I have set up a basic express https web server on my Windows 10 machine to serve my local network. Initially, the server is able to connect with all devices on the LAN without any issues. However, after a few minutes, it appears to go idle and stops respon ...

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

In a different discussion, it was mentioned that the method used to create a CSS triangle allows for triggering the hover state or click event only when the cursor is inside the triangle. There is a demo provided to demonstrate this with the hover state. ...

The Vue.js computed property isn't updating as expected

I am a beginner with Vuejs and currently following their documentation, which I find very helpful. One aspect that I am struggling to grasp is how computed properties are triggered. For my project, I am using ag-grid and I want to update the total number ...

What is preventing jQuery UI from detecting jQuery?

I have successfully created a JavaScript widget that is capable of being embedded on any third-party website, in any environment. The widget relies on jQuery and jQuery UI for its functionality. After following the guidelines outlined in How to embed Javas ...

Testing the speed of the client's side

In my quest to create an application that allows users to conduct a speedtest on their WiFi network, I have encountered some challenges. While standalone speedtest apps like Speedtest.net and Google exist, server-based speed test modules from NPM are not s ...

Using functions as properties in React.js

I am facing an issue while trying to pass a function as a prop. Although I have done this successfully in the past, now I am getting an error (this.props.functionName is not a function). I have a child component called Navbar and a parent component named ...

Leveraging the power of the wildcard feature to execute a variety of scripts when running

Inside my package.json file, I currently have the following scripts block: "scripts": { "test": "node tests/*-test.js" } In the tests folder, I have files named a-test.js and b-test.js. This can be confirmed by using the command ls tests/*-test.js. ...

I am unable to submit the form with the sweetalert 2 feature

I've tried numerous solutions, but none seem to work for me. Below is the PHP code I am using: <? if( isset($_POST['btn-login']) ) { $mails = new PHPMailer; $content = "xxxx"; $mails->IsSMTP(); $mails->send(); } ?&g ...

Ways to retrieve a value from a span using the Document Object Model

sample.html <span id='char'>{{value}}</span> sample.ts console.log((<HTMLInputElement>document.getElementById('char'))) This code snippet will display <span id='char'>ThisIsTheValueupdated</sp ...

Internet Explorer 11's readyState is consistently 'loading' and the DOMContentLoaded event is not firing because of non-SSL content

When using IE11 and encountering the user prompt Only secure content is displayed. #Show all content# The readyState remains constant at loading and the events do not trigger. Everything works fine once the user clicks on Show all content. Unfortu ...

Using jQuery to iterate through an open dialog box

I want to add a small animation for the user to indicate that their submission is in progress. $("#textscreen").dialog({ modal: true, draggable: false, open: function(event, ui) { $(this).everyTime("1s", function(i) { var d ...

Issue with EnumDeserializer in jackson-mapper 1.9.12 version

I'm currently working on a scenario where I need to map a String to an enum Object using the Jackson ObjectMapper.readValue(String,Class) API. The issue arises when my JSON string contains a Task Object with an Action enum defined as follows: public ...

Create a d3 map specifically for a selected region based on the provided latitude and longitude coordinates

I am currently working on developing a d3 map inspired by the codepen created by Andy Barefoot: https://codepen.io/nb123456/pen/zLdqvM?editors=0010. My goal is to adjust the initiateZoom() function in a way that setting specific lat/lon coordinates for a b ...