Axios get call fired on select

I am receiving multiple json files from a server. They are all accessible on different urls based on years (2018,2019 and 2020). I am prefilling these years into a dropdown but now I want to fire a get call with axios everytime I change the value(?year=2018, ?year=2019 or ?year=2020). I also have another dropdown that is prefilled with IDs but have no idea how to attach a certain ID to selected year. These dropdowns are acting as filter for a table that is rendered below.

So to be more clear, when I reload I fire a get call for current year like so: baseurl?year=2019, with this selection I get ALL the data but then if I select an ID, this ID needs to be added to url like so: baseurl?year=2019?id=0

My current code:

data() {
 return {
  year:[],
  id: 0,
 }
},

computed: {
 axiosParams(){
  const params = new URLSearchParams();
  params.append('year', this.year);
  return params;
 },

 //this returns my current year
 year() {
  var now = new Date()
  var nowy = now.getFullYear()

  return nowy
},

 //this method makes sure that the dropdown is always preffiled 
 //with following years - eg. next year I only need 2019, 2020 and 
 //2021
 years() {
   var yearsArray = []
   var now = new Date()
   for (let i = -1; i < 2; i++) {
     var nowy = now.getFullYear() + i
     yearsArray.push(nowy)
   }
   return yearsArray
 },

},
methods: {
 getYears: function() {
    axios.get('myurl',{
     params : this.axiosParams
    }
    }).then((response) => {
      this.year = response.data;
      this.table = response.data;
    })
 },
 getId: function() {
    axios.get('myurl',{
     params : {
      year: this.year,
      id : this.id
    }
    }
    }).then((response) => {
      this.id = response.data;
      this.table = response.data;
    })
 },
},

created: {
 this.getYears();
 this.getId();
}

My HTML:

<select v-model="year">
 <option v-model="yearsArray" v-for="year in years">{{year}} . 
</option></select>

<select v-model="id"><option v-for="item in id">{{item}}</option> . 
</select>

Thanks!

Solution

So, if I understand, you want to trigger an axios call when an id is selected. This can be done a couple of ways but this way will trigger on the selection of an id, and also on the selection of a year.

<select v-model="selectedYear"  @change="yearSelected">
  <option v-for="year in years" :key="year" :value="year">{{year}} .</option>
</select>

<select v-model="selectedId" @change="idSelected">
  <option v-for="id in ids" :key="id" :value="id">{{id}}</option> . 
</select>

Here, the years is from your computed property for years and ids is what you said was a dropdown "prefilled with IDs". The two v-model properties are initially set to null then are assigned a value on selection. They are defined in data like so.

data: () => ({
  selectedId: null,
  selectedYear: null,
}),

Each has a function call to do something with the selected option, @change="idSelected" which calls this method:

methods: {
  idSelected() {
    console.log(this.selectedId)
    // here you make you axios call using this.selectedId as the param
    axios.get('myurl',{
      params : {
        year: this.selectedYear,
        id : this.selectedId
      }
    }, 
...
}

You could have the two selects without the @change and have a button that triggers the function call with @click. Either way you use the selectedId and selectedYear in that method.