Executing a function when a property changes in VueJS

Is there a way to trigger the last axios call only after getting both ID_AnUniversitarAbsolvire and ID_Facultate? I attempted to create a function within watch: {}, but it was unsuccessful. Any suggestions on how to achieve this would be greatly appreciated.

<v-col class="d-flex" cols="12" sm="4">
        <v-select
          :items="anUniversitar"
          item-text="Denumire"
          item-value="ID_AnUniv"
          label="An Universitar"
          v-model="ID_AnUnivAbsolvire"
          :rules="[v => !!v || 'Alege un an universitar']"
        ></v-select>
      </v-col>
        <v-col class="d-flex" cols="12" sm="4">
          <v-select
            :items="facultateList"
            item-text="Denumire"
            item-value="ID_Facultate"
            label="Facultate"
            v-model="ID_Facultate"
            :rules="[v => !!v || 'Alege facultatea']"
          ></v-select>
        </v-col>

data: () => ({
      ID_AnUnivAbsolvire: '',
      ID_Facultate: '',
    }),
methods: {
},
created() {
axios.get('http://193.254.231.70/api/agsis.api/AnUniversitar/AnUniversitar_GetCurrentAndPrevious')
        .then(res => {
          const data = res.data;
          for(const item of data) {
            this.anUniversitar.push(item);
          }
        }),
      axios.get('http://193.254.231.70/api/agsis.api/Facultate/FacultateList')
        .then(res => {
          const data = res.data;
          for(const item of data) {
            this.facultateList.push(item);
          }
      }),
      axios.get(`http://193.254.231.70/api/agsis.api/Facultate/SpecializareListByFacultateAnUniv?ID_Facultate=${this.ID_Facultate}&ID_AnUniv=${this.ID_AnUnivAbsolvire}`)
          .then(res => {
            const data = res.data;
            for(const item of data) {
              this.specializareFacultate.push(item);
            }
        })
    },

Answer №1

One way to accomplish this is by following these steps:

  1. Start by nesting your properties inside an object
  2. Then, watch that object inside the watch lifecycle hook
  3. Lastly, place your last axios call inside the methods
<script>
export default {
  name: "App",
  data: () => ({
     IDs: {
      anUnivAbsolvire: '',
      facultate: '',
     }
    }),
    watch: {
      IDs: {
      handler(newValue, oldValue) {
       if(newValue.anUnivAbsolvire && newValue.facultate) {
           this.lastAxios()
         }
      },
      deep: true
    }
    },
    methods: {
      lastAxios() {
        // your axios
      }
    }
};
</script>

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

"Error: Attempting to Route an Invokable Class that is Not Valid

Recently diving into Laravel, I added the following code snippet to my routes/api.php file in Laravel 9: Route::group([ 'prefix' => 'auth', 'namespace' => 'Auth' ], function(){ Route::post('reg ...

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

How come the jQuery extend function isn't duplicating my JavaScript object?

After researching various posts on cloning and copying JavaScript objects, specifically focusing on these two topics: How do I correctly clone a JavaScript object? What is the most efficient way to deep clone an object in JavaScript? It appears that the ...

Steps for Setting a Radio Button Group back to a Specific Value

I am currently working with a set of radio buttons that are displayed using ng-repeat. The last radio button is selected by default (ng-checked="$last"): Status: <span ng-repeat="button in statusList"> <input type="radio" name="status" ng-mod ...

Creating a Django-powered Ajax auto page loader

I am working on a website that would greatly benefit from having an autopager feature. An autopager automatically loads the next page when scrolling to the bottom, similar to how the Reddit Enhancement Suite functions. However, implementing this in Django ...

How to utilize ngFor for multiple inputs in Angular 4

Apologies for my poor English, I'll do my best to explain my issue. Here's the problem: I'm using ngFor on an Input element, but when I enter data, it gets repeated in all the fields and I can't figure out why. <div *ngFor=" ...

jQuery Form Plugin - fails to trigger error callback for Internal Server errors (500)

I am dealing with a situation where my server is returning a Status code 500, but my jQuery Form is triggering the success callback instead of the error callback. My current jQuery version is 1.7.1 and jQuery Form version is 2.73 from March 2011. The serv ...

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

What alternative can be used instead of Document in Javascript when working with EJS?

Currently, I am utilizing ejs to handle my HTML tasks and I have come across an issue where I cannot use the usual document.getElementById('id') method within this environment. The error message displayed states "document not defined". This has ...

Ways to position loading animation in the center and create a lightbox effect for the rest of the page

I have implemented a custom loader in CSS with the following styles: .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear inf ...

The initialization of the ng-model to an empty string as the default value

I am currently working on a user login and registration form where I noticed that the default values appearing are most likely cached by my browser. I am exploring ways to clear these values programmatically so that the input boxes are empty. Despite attem ...

Exploring Vue.js integration with Elasticsearch API functions

I have a script written in Vue.js and I am looking to incorporate an Elasticsearch API method. // ./main.js var Vue = require('vue'); Vue.use(require('vue-resource')); import ES from './elasticsearch.js'; new Vue({ el ...

Get alerts from Twitter pushed to my site

Is it possible to create a web application that utilizes JavaScript to receive notifications from Twitter? I want my website app to send me notifications whenever a person I follow posts a new article. I'm having difficulty with this task and would gr ...

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Once I updated to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit), the behavior of the span element changed drastically. It shifted its baseline when multiple spans were stacked on top of each other. Exp ...

The display message in Javascript after replacing a specific string with a variable

I'm currently working on a task that involves extracting numbers from a text input, specifically the first section after splitting it. To test this functionality, I want to display the result using an alert. The text input provided is expected to be ...

Utilizing a JavaScript variable in Firefox with Java WebDriver: A guide

The main objective is to retrieve the JavaScript element authKey in Java code. Below are the codes: index.html: ... <script type="text/javascript"> var params = { authKey: "abc" }; Main.init("#content", p ...

What is the best way to incorporate a minimum width and maximum width in CSS that add up to 100% when necessary?

Can anyone help me find CSS rules that can set a fixed width for an element (width: 500px) but also allow it to be responsive with max-width: 100% if the container is narrower than the element? I saw this example and it works perfectly: .elem { width: 60 ...

Understanding Angular's transclusion functionality and how it interacts with scopes

I've been working on creating a directive for click-to-edit input fields. My goal was to make it an attribute type directive that can work with various types of input fields by simply transcluding the input field itself. However, I've encountere ...

Is there a way to adjust the position of a Bootstrap 5 dropdown menu in real-time using javascript or jQuery?

Within my web app, I have implemented dynamically generated Bootstrap 5 dropdown menus that can sometimes be extensive. To optimize screen space usage, I am seeking a way to alter the offset computed by Popper.js through javascript. Unfortunately, I have e ...

What is the mechanism behind pushing an empty array into another empty array?

let arr = []; console.log(arr.push([])); // 1 Instead of logging [[]], the output is 1. Can someone explain what is happening in the code above? ...