Axios 在选择时触发调用

Question

我从服务器接收多个 json 文件。它们都可以根据年份（2018、2019 和 2020）在不同的 url 上访问。我将这些年预填充到下拉列表中，但现在我想在每次更改值（？year=2018、？year=2019 或 ?year=2020）时使用 axios 调用 get 调用。我还有另一个下拉列表，它预先填充了 ID，但不知道如何将某个 ID 附加到选定的年份。这些下拉列表充当下面呈现的表格的过滤器。

所以更清楚的是，当我重新加载时，我会像这样触发当前年份的 get 调用：baseurl?year=2019，通过这个选择，我可以获得所有数据，但是如果我选择一个 ID，这个 ID 需要添加到 url像这样：baseurl?year=2019?id=0

我目前的代码：

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();

}

我的 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>

谢谢！