I want to call last axios after I have ID_AnUniversitarAbsolvire and ID_Facultate. I tried to build a function in watch: {}, but it didn't work. Does anyone have any idea how I could do this? Any suggestions are much appreciated.

<v-col  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  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);
            }
        })
    },

CodePudding user response：

You can achieve it by:

1. Nesting your properties inside an object
2. Watching that object inside watch lifecycle hook
3. Placing your last axios inside 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>